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

Question

I have started using flutter very recently and I need to show a list of countries which are stored in a collection in firestore (there are just three countries for testing but I will be adding more) enter image description here but the problem is I can access individual documents but I am unable to show them properly in a list view. Here is the code I have written:

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 database snapshot

How do I write this code correctly?

Answer 1

Wrapping Column with SingleChildScrollView should work.

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),
  ),
);
 }
 }