【Flutter】初心者のためのGridView徹底解説！

# 概要

参考文献が少ないFlutterでは、使用するWidgetがわかったとしても、そこからがちょっと手強いっていうパターンありますよね。
ということで、当時Flutte初心者であった僕が苦戦したGridViewの実装について、パラメータ単位で最低限覚えておくべきものを徹底解説していきます！

徹底解説と言っても、そこまでGridViewの実装回数を重ねてきたわけではないので、これさえ覚えておけば！というものを集めました。

## こんな人に読んでほしい

* Flutter初心者の方
* GridViewの実装を検討している方
* GridViewのオーソドックスな実装を経験したことがある方
* GridViewを頻繁に実装したことがある方 ←コメントください！

## 実装環境

* VSCode
* AndroidStudio(エミュレータ生成のため)
* Flutter:Ver2.10.5

# GridViewでの実装画面

GridViewでは、こんなUIを実装できます。

<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524065/bbbbd92d-6ff8-943b-1515-de4c94e0c6a6.gif" alt="10222023130701.gif">

# パラメータ

以下、公式より

https://api.flutter.dev/flutter/widgets/GridView/GridView.html

```dart
GridView(
    {Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    required SliverGridDelegate gridDelegate,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,
    List<Widget> children = const <Widget>[],
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    Clip clipBehavior = Clip.hardEdge,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId}
)
```

それでは1つずつみていきましょう！

## scrollDirection

スクロールさせる方向を指定します。

これにはデフォルトで`Axis.vertical`が定義されているので、何も気にせずに実装すれば縦方向のスクロール機能で動作します。

`Axis.vertical` : 縦方向のスクロール(デフォルト)
`Axis.horizontal` : 横方向のスクロール

## reverse

グリッド内の子要素に与えた表示順序を逆転させます。
デフォルトでfalseが定義されているため、何も気にせずに実装すれば`children`に渡した上から順に表示されます。

ここで注意が必要なのが、1要素ずつ(123...が、321...のように)逆順になるのではなく、グリッド(列または行)単位で逆順になります。

## controller

GridViewのスクロールを制限する、ScrollControllerを指定します。

## physics

スクロールの物理的挙動を制限します。

適宜以下の設定をすることで、スクロールを制限します。

`AlwaysScrollableScrollPhysics()` : 常にスクロールする
`BouncingScrollPhysics()` : スクロールが端まで達した時にバウンドする
`ClampingScrollPhysics()` : スクロールが端まで達した時に停止する
`NeverScrollableScrollPhysics()` : 一切スクロールしない

## shrinkWrap

GridViewの子要素に合わせてサイズを縮小するかどうかを指定します。

デフォルトでfalseが入っているため、bodyに対してGridViewが渡されている場合、bodyの領域全体がスクロール可能な領域となります。

ただし、trueを指定した場合、子要素のサイズに合わせてGridViewの大きさを縮小します。

## padding

GridViewの外側の余白の大きさを指定します。

## gridDelegate

GridViewのレイアウトを設定します。
このパラメータはrequiredとなってるため、設定が必須です。
結論、まずはここで以下の2つの制御方法を決定し、GridViewの性質を決めることになります。

`SliverGridDelegateWithFixedCrossAxisCount` : このウィジェット内のパラメータ`crossAxisCount`に、主軸と交差する方向に幾つ要素を並べるかを指定します。

`SliverGridDelegateWithMaxCrossAxisExtent` : このウィジェット内のパラメータ`maxCrossAxisExtent`に主軸と交差する方向の子要素の最大値を指定します。子要素が親ウィジェットの領域を超える場合、次のグリッドに表示されます。

これらの性質と寄せるために、メソッドとして用意されている`GridView.count`と`GridView.extent`でも代用可能です。

メソッドについては、後の記事にまとめますね！(いつになるかはわからないけど)

## children

グリッド内で表示する子要素をリストで渡します。

## dragStartBehavior

GridViewのドラッグ操作のトリガーを指定します。

`DragStartBehavior.start` : マウスデバイス、タッチデバイスのどちらも対応。子要素のWidgetがクリック(タッチ)されたら、スクロールが開始される。(デフォルト)
`DragStartBehavior.down` : タッチデバイス向けの設定。子要素がタッチされたら即座にスクロールが開始される。

## keyboardDismissBehavior

キーボードが表示されている時のスクロールに対して、キーボードの振る舞いを指定します。

`ScrollViewKeyboardDismissBehavior.manual` : スクロールを開始してもキーボードは消えない。
`ScrollViewKeyboardDismissBehavior.onDrag` : スクロールを開始すると、キーボードがしまわれる。

# 以上！！

GridViewの実装経験豊富な方、ここで紹介できなかったパラメータについて、コメント欄で解説お願いします！！