Flutter BottomSheet高度适配JSON数据项数量的实现咨询

Hey there! I see you're struggling with your modal bottom sheet's height—it's either leaving blank space on long screens or cutting off content on shorter ones. Let's adjust your code to make it automatically fit the number of items from your JSON list.

The Root Cause #

Right now, your Column uses MainAxisSize.max (which makes it take all available vertical space) paired with an Expanded widget wrapping the GridView. This forces the sheet to stretch to a fixed height regardless of how many items you have, leading to the issues you're seeing.

The Fix #

Here's the adjusted code with key changes to enable adaptive height:

void _showModalBottomSheet(AsyncSnapshot<CatlistResult> snapshot) {
  showModalBottomSheet(
    context: context,
    // Allow the sheet to expand to fit content (up to our max height)
    isScrollControlled: true,
    builder: (BuildContext bc) {
      return Card(
        elevation: 3.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15),
            topRight: Radius.circular(15)
          )
        ),
        // Cap the sheet's max height to 80% of the screen (adjust as needed)
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height * 0.8,
          ),
          child: Container(
            padding: EdgeInsets.only(left: 16.0, top: 10.0, right: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              // Make Column only take the space its children need
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(bottom: 10.0),
                  child: Image.asset('assets/images/main/more_2lines_20dp.png', scale: 3.5),
                ),
                // Remove Expanded—GridView with shrinkWrap will size itself to content
                GridView.builder(
                  // Let users scroll if content exceeds max height
                  physics: AlwaysScrollableScrollPhysics(),
                  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 && 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),
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    }
                    // Return empty container for non-matching items to avoid errors
                    return Container();
                  },
                ),
              ],
            ),
          ),
        ),
      );
    }
  );
}

Key Changes Explained #

• mainAxisSize: MainAxisSize.min: Makes the Column only occupy the vertical space its children actually need, instead of stretching to fill the screen.
• Removed Expanded: The GridView with shrinkWrap: true will automatically adjust its height to fit all items (no unnecessary blank space when there are few items).
• isScrollControlled: true: Lets the bottom sheet expand as much as needed (up to our set max height) instead of being restricted to a fixed fraction of the screen.
• ConstrainedBox with maxHeight: Prevents the sheet from taking over the entire screen if you have a huge number of items—users can scroll through the content comfortably.
• AlwaysScrollableScrollPhysics(): Ensures scrolling works smoothly when content exceeds the max height.

内容的提问来源于stack exchange，提问作者R Rifa Fauzi Komara