今回は、GridView
で、画像下にあるというボタンWidgetの設置方法について。
上図のオレンジ色のRaisedButton
のことです。
GridViewの下にボタンWidgetを配置する
普通にRaisedButton
を追加しようとすると、以下のエラーに遭遇します。
The method '>' was called on null
画面サイズがおかしくなっているためにエラーが発生しているのでしょうが、詳細は分かりません。
方法:Expandedでラップする
Expandedで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を利用しています。
ご存じない方はこちら。
あとは、GridViewの下にRaisedButton
を普通に追加すればOK。
詳細は割愛していますが、_addSection
内でRaisedButton
を作成しています。
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