Flutter应用运行报错RenderFlex底部溢出33像素，求代码排查

Hey there! That bottom overflow error pops up because the content inside your grid items (the Column holding Text and Image) is taking up more vertical space than the StaggeredTile has allocated. Let’s fix this step by step.

Why This Happens #

When you use StaggeredTile.count(2, i.isEven ? 2 : 3), even-indexed grid items get a shorter vertical space. The Text takes up some height, and the FadeInImage tries to use its full original size—pushing the total height beyond the tile’s limit, hence the overflow.

Solutions to Try #

1. Use Expanded for the Image

Wrap your FadeInImage with Expanded so it automatically fills the remaining space in the Column, instead of trying to take its full unconstrained height:

new Hero(
  tag: imgPath,
  child: Expanded(
    child: new FadeInImage(
      image: new NetworkImage(imgPath),
      fit: BoxFit.cover,
      placeholder: new AssetImage("assets/logo.png"),
    ),
  ),
),

2. Limit Text Length (Prevent Long Titles from Wasting Space)

Long product titles can also eat up too much vertical space. Add maxLines and overflow properties to your Text widget to keep it constrained:

Text(
  title,
  style: new TextStyle(
    fontStyle: FontStyle.italic,
    color: Colors.green[900],
    fontSize: 16.0
  ),
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
),

3. Adjust Staggered Tile Heights (Optional)

If you still find some items feel cramped, tweak the tile heights to give more breathing room:

staggeredTileBuilder: (i) => new StaggeredTile.count(2, i.isEven ? 2.5 : 3),

Full Modified Code #

Here’s your updated OfferPage with all fixes applied:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class OfferPage extends StatefulWidget {
  @override
  _OfferPageState createState() => new _OfferPageState();
}

class _OfferPageState extends State<OfferPage> {
  StreamSubscription<QuerySnapshot> subscription;
  List<DocumentSnapshot> offerpostList;
  final CollectionReference collectionReference = Firestore.instance.collection("todos");

  @override
  void initState() {
    super.initState();
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        offerpostList = datasnapshot.documents;
      });
    });
  }

  @override
  void dispose() {
    subscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: offerpostList != null? new StaggeredGridView.countBuilder(
        padding: const EdgeInsets.all(8.0),
        crossAxisCount: 4,
        itemCount: offerpostList.length,
        itemBuilder: (context, i) {
          String imgPath = offerpostList[i].data['url'];
          String title = offerpostList[i].data['productTitle'];
          return new Material(
            elevation: 8.0,
            borderRadius: new BorderRadius.all(new Radius.circular(8.0)),
            child: new InkWell(
              child:new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    title,
                    style: new TextStyle(
                      fontStyle: FontStyle.italic,
                      color: Colors.green[900],
                      fontSize: 16.0
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  new Hero(
                    tag: imgPath,
                    child: Expanded(
                      child: new FadeInImage(
                        image: new NetworkImage(imgPath),
                        fit: BoxFit.cover,
                        placeholder: new AssetImage("assets/logo.png"),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
        staggeredTileBuilder: (i) => new StaggeredTile.count(2, i.isEven ? 2 : 3),
        mainAxisSpacing: 8.0,
        crossAxisSpacing: 8.0,
      ) : new Center(
        child: new CircularProgressIndicator(),
      ));
  }
}

These changes will ensure the Column’s children share the available space properly, eliminating the overflow error. Give it a test run!

内容的提问来源于stack exchange，提问作者sudipta Borah