【Flutter】GridViewの下にボタンWidgetを配置する方法

4842 ワード
widget Dart Flutter Dart テキストリンク

今回は、GridViewで、画像下にあるというボタンWidgetの設置方法について。

上図のオレンジ色のRaisedButtonのことです。

GridViewの下にボタンWidgetを配置する

普通にRaisedButtonを追加しようとすると、以下のエラーに遭遇します。

The method '>' was called on null

画面サイズがおかしくなっているためにエラーが発生しているのでしょうが、詳細は分かりません。

方法：Expandedでラップする

ExpandedでGridViewをラップしてあげると、先ほどのエラーは発生しないで適切に表示されるようになります。

コード例（GridView）
  Widget get _gridViewSection =>
      Consumer<CheckListProvider>(builder: (context, model, _) {
        return Expanded(   // ★ExpandedでGridViewをラップする。
          child: GridView.builder(
            itemCount: model.checks.length,
            shrinkWrap: true,
            padding: const EdgeInsets.all(4),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            itemBuilder: (BuildContext context, int index) {
              return _listItem(model, index); // Grid一つ分のデザインを作成(割愛)
            },
          ),
        );
      });

GridViewの説明には関係ないですが、Consumer<CheckListProvider>…はProviderを利用しています。
ご存じない方はこちら。

【Flutter】アプリ製作から学ぶProviderの使い方【図解付き】

あとは、GridViewの下にRaisedButtonを普通に追加すればOK。
詳細は割愛していますが、_addSection内でRaisedButtonを作成しています。

コード例（body部）
body: Column(
  children: [
    // GridView
    _gridViewSection,
    // 「Add to Todo List」ボタン
    _addSection,
  ],
),

参考

GridViewの使い方

Flutter Doc JP GridView
https://flutter.ctrnost.com/basic/layout/gridview/

エラー対処法

https://stackoverflow.com/questions/58559145/the-method-was-called-on-null