首页 > 解决方案 > 错误:- 引发了另一个异常:A RenderFlex 在底部溢出了 33 个像素

问题描述

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

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

'包: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(),
        ));
  }
}

标签: firebaseflutter

解决方案


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


推荐阅读