How to make a bottom sheet with height follow the amount of item of JSON

Question

BottomSheet in Flutter so that the height follows the number of items (data from JSON) is that what? Because I made the height not follow the amount of data but followed 1/2 the screen of each cellphone. So if the phone is long, there is empty space at the bottom. If the cellphone is short, the data is cut by the screen below.

This is the code for creating bottom sheet:

void _showModalBottomSheet(AsyncSnapshot<CatlistResult> snapshot) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return Card(
            elevation: 3.0,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))),
            child: Container(
              padding: EdgeInsets.only(left: 16.0, top: 10.0, right: 16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(bottom: 10.0),
                    child: Image.asset('assets/images/main/more_2lines_20dp.png', scale: 3.5),
                  ),
                  Expanded(
                    child: GridView.builder(
                      physics: NeverScrollableScrollPhysics(), //kill scrollable
                      shrinkWrap: true,
                      itemCount: snapshot == null ? 0 : snapshot.data.catlist.length,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
                      itemBuilder: (BuildContext context, int index) {
                        var numItems = snapshot.data.catlist[index];
                        if (numItems.f == 1) {
                          if (numItems.b == 0) {
                            return GestureDetector(
                              child: Card(
                                elevation: 0.0,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: <Widget>[
                                    Image.asset('assets/images/main/cat_${numItems.a}.png', fit: BoxFit.cover, width: 50.0, height: 50.0),
                                    Container(
                                      margin: EdgeInsets.only(top: 10.0),
                                      child: Text(
                                        numItems.c,
                                        maxLines: 2,
                                        textAlign: TextAlign.center,
                                        style: TextStyle(fontSize: 10),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          }
                        }
                      },
                    ),
                  ),
                ],
              ),
            ),
          );
        }
    );
  }

And this is the result of my code:

1. Run from iOS Emulator

2. Run from Android Emulator

Answer 1

Problems:

1. In your parent Column you are using

   mainAxisSize: MainAxisSize.max
   

2. You are also using Expanded in this Column which creates the empty space if there are less items in the GridView. Remove this Expanded widget.

---

Solution:

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.min, // 1st use min not max
  children: <Widget>[
    Container(...),
    GridView.builder(...), // 2nd remove Expanded
  ],
)