错误：- 引发了另一个异常：A RenderFlex 在底部溢出了 33 个像素

Question

[在此处输入图像描述]
1运行我的应用程序时显示错误...我的代码在下面...谁能告诉我我的代码有什么问题 ///////////////////// 当我运行我的应用程序时显示错误...我的代码在下面...谁能告诉我的代码有什么问题 /////////////////////

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() {
    // TODO: implement initState
    super.initState();
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        offerpostList = datasnapshot.documents;
      });
    });

    // _currentScreen();
  }

  @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)),
                  new Hero(
                    tag: imgPath,
                    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(),
        ));
  }
}

Answer 1

flutter 中的列没有滚动功能。问题是您来自 firebase 的数据不能放在单个屏幕中。这就是引发溢出错误的原因。使用 ListView 代替具有滚动能力的 Column。

Answer 2

设备中可用空间的列小部件可在 firebase 中获取 qll 数据并获得滚动效果，您可以使用 FirebaseAnimatedList。

Answer 3

对于像文本覆盖图像的网格视图这样的 Olx，这里有一个示例。尝试一下并更改您的问题，因为它可能会产生误导。

main.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firestore_grid_view/product.dart';
import 'package:firestore_grid_view/product_details.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
      home: new MyApp(),
      debugShowCheckedModeBanner: false,
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Product> _products = [];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Home'),
      ),
      body: new StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection('products').snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (!snapshot.hasData) return new Text('Loading...');
          return new GridView.count(
            crossAxisCount: 2,
            children: _buildGrid(snapshot.data.documents),
          );
        },
      ),
    );
  }

  List<Widget> _buildGrid(List<DocumentSnapshot> documents) {
    List<Widget> _gridItems = [];
    _products.clear();

    for (DocumentSnapshot document in documents) {
      _products.add(new Product(
          name: document['productTitle'],
          category: document['category'],
          imageUrl: document['url'],
          contactNumber: document['contactNumber']));
    }

    for (Product product in _products) {
      _gridItems.add(_buildGridItem(product));
    }

    return _gridItems;
  }

  Widget _buildGridItem(Product product) {
    return new GestureDetector(
      child: new Card(
        child: new Stack(
          alignment: Alignment.center,
          children: <Widget>[
            new Hero(
              tag: product.name,
              child: new Image.network(product.imageUrl, fit: BoxFit.cover),
            ),
            new Align(
              child: new Container(
                padding: const EdgeInsets.all(10.0),
                child: new Text(product.name,
                    style: new TextStyle(color: Colors.white)),
                color: Colors.black.withOpacity(0.4),
                width: double.infinity,
              ),
              alignment: Alignment.bottomCenter,
            ),
          ],
        ),
      ),
      onTap: () => onProductTapped(product),
    );
  }

  onProductTapped(Product product) {
    Navigator.of(context).push(new MaterialPageRoute(
        builder: (context) => new ProductDetails(product)));
  }
}

product_details.dart

import 'package:firestore_grid_view/product.dart';
import 'package:flutter/material.dart';

class ProductDetails extends StatelessWidget {
  final Product product;

  ProductDetails(this.product);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          new Expanded(child: new Container()),
          new Hero(
              tag: product.name,
              child: new Image(
                image: new NetworkImage(product.imageUrl),
                fit: BoxFit.fill,
                width: double.infinity,
                height: 300.0,
              )),
          new Padding(
            padding: const EdgeInsets.all(15.0),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Padding(
                  padding: const EdgeInsets.only(right: 8.0),
                  child: new Text(
                    'Category -',
                    style: new TextStyle(
                        fontSize: 20.0, fontWeight: FontWeight.bold),
                  ),
                ),
                new Text(
                  product.category,
                  style: new TextStyle(
                      fontSize: 20.0, fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
          new Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Padding(
                  padding: const EdgeInsets.only(right: 8.0),
                  child: new Text(
                    'Contact Number -',
                    style: new TextStyle(
                        fontSize: 20.0, fontWeight: FontWeight.bold),
                  ),
                ),
                new Text(
                  product.contactNumber,
                  style: new TextStyle(
                      fontSize: 20.0, fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),

          new Expanded(child: new Container()),
        ],
      ),
    );
  }
}

product.dart

class Product {
  final name, category, imageUrl, contactNumber;

  Product({this.name, this.category, this.imageUrl, this.contactNumber});
}