firebase - 如何正确编写以下引发此错误的代码（A RenderFlex 在底部溢出 126 像素。）

Question

我最近开始使用颤振，我需要显示存储在 firestore 集合中的国家列表（只有三个国家需要测试，但我会添加更多）在此处输入图像描述，但问题是我可以访问单个文档，但我无法在列表视图中正确显示它们。这是我写的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';

class test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          StreamBuilder(
            stream: FirebaseFirestore.instance
                .collection('countries')
                .doc('nW9L4LGpn2MZVyiTyUII')
                .snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData)
                return Text('Loading data.. please wait..');
              return ListTile(
                title: Text(snapshot.data['name']),
                subtitle: Text(snapshot.data['description']),
                contentPadding: EdgeInsets.all(20),
                leading: Image.network(
                  snapshot.data['image'],
                  height: 200,
                  width: 80,
                ),
              );
            },
          ),
          StreamBuilder(
            stream: FirebaseFirestore.instance
                .collection('countries')
                .doc('2mnr4W3HYxCXrwb1KPAS')
                .snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData)
                return Text('Loading data.. please wait..');
              return ListTile(
                title: Text(snapshot.data['name']),
                subtitle: Text(snapshot.data['description']),
                contentPadding: EdgeInsets.all(20),
                leading: Image.network(
                  snapshot.data['image'],
                  height: 200,
                  width: 80,
                ),
              );
            },
          ),
          StreamBuilder(
            stream: FirebaseFirestore.instance
                .collection('countries')
                .doc('WMWhmYkDgm6PXnt5Ze7F')
                .snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData)
                return Text('Loading data.. please wait..');
              return ListTile(
                title: Text(snapshot.data['name']),
                subtitle: Text(snapshot.data['description']),
                contentPadding: EdgeInsets.all(20),
                leading: Image.network(
                  snapshot.data['image'],
                  height: 200,
                  width: 80,
                ),
              );
              ;
            },
          ),
        ],
      ),
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Color.fromRGBO(255, 111, 82, 0.8),
      ),
    );
  }
}

App UI Firestore 数据库快照

如何正确编写此代码？

标签： firebaseflutterdartgoogle-cloud-firestore

Answer 1

用 SingleChildScrollView 包装 Column 应该可以工作。

class test extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
return Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: [
        StreamBuilder(
          stream: FirebaseFirestore.instance
              .collection('countries')
              .doc('nW9L4LGpn2MZVyiTyUII')
              .snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData)
              return Text('Loading data.. please wait..');
            return ListTile(
              title: Text(snapshot.data['name']),
              subtitle: Text(snapshot.data['description']),
              contentPadding: EdgeInsets.all(20),
              leading: Image.network(
                snapshot.data['image'],
                height: 200,
                width: 80,
              ),
            );
          },
        ),
        StreamBuilder(
          stream: FirebaseFirestore.instance
              .collection('countries')
              .doc('2mnr4W3HYxCXrwb1KPAS')
              .snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData)
              return Text('Loading data.. please wait..');
            return ListTile(
              title: Text(snapshot.data['name']),
              subtitle: Text(snapshot.data['description']),
              contentPadding: EdgeInsets.all(20),
              leading: Image.network(
                snapshot.data['image'],
                height: 200,
                width: 80,
              ),
            );
          },
        ),
        StreamBuilder(
          stream: FirebaseFirestore.instance
              .collection('countries')
              .doc('WMWhmYkDgm6PXnt5Ze7F')
              .snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData)
              return Text('Loading data.. please wait..');
            return ListTile(
              title: Text(snapshot.data['name']),
              subtitle: Text(snapshot.data['description']),
              contentPadding: EdgeInsets.all(20),
              leading: Image.network(
                snapshot.data['image'],
                height: 200,
                width: 80,
              ),
            );
            ;
          },
        ),
      ],
    ),
  ),
  appBar: AppBar(
    centerTitle: true,
    backgroundColor: Color.fromRGBO(255, 111, 82, 0.8),
  ),
);
 }
 }