7

隆起したボタンのグリッドビューを作成しようとしていますが、次の図のようにグリッドの行間に大きなスペースがあります:

ここに画像の説明を入力

ページの下部にあるコードを使用して GridView を実装しています。

ご覧のとおり、次のように設定しました。

SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4), 

主軸の間隔と交差軸の間隔を設定すると、これらのスペースが削除されるはずです。

また、グリッドビューをサイズのボックスに戻し、それを SliverGridWithFixedCount に変更しようとしましたが、何も変更されていないようです。

レイアウトで何が間違っていたのかわかりませんか?

ご協力いただきありがとうございます

body: Column(
        children: <Widget>[
          Flexible(
            child: filtersGridView(),
          ),
        ],
      ),
    );
  }
}


class filtersGridView extends StatefulWidget {
  @override
  _filtersGridViewState createState() => _filtersGridViewState();
}

class _filtersGridViewState extends State<filtersGridView> {

  final List <DocumentSnapshot> documents;
  _filtersGridViewState({this.documents});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: Firestore.instance.collection('categories').snapshots(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return Center(child: const Text('Loading events...'));
        }
        return GridView.builder(
          gridDelegate:
          SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4),
          itemBuilder: (BuildContext context, int index) {
            return Column(children: <Widget>[
              InkWell(
                onTap: () {

                },
                child: SizedBox(
                  height: 30,
                  child: RaisedButton(
                    color: Colors.white,
                    child: Row(
                      children: <Widget>[
                        Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.center, style: TextStyle(fontSize:  15, color: Colors.black,),),
                         ],
                    ),
4

3 に答える 3