在 Flutter 中使用 ListView 找不到方向性小部件答案

【问题标题】：No Directionality Widget Found with ListView in Flutter在 Flutter 中使用 ListView 找不到方向性小部件
【发布时间】：2022-01-12 10:08:54
【问题描述】：

我试图显示我在名为“练习”的 Cloud Firestore 数据库中获取的数据的 ListView：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final db = FirebaseFirestore.instance;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<QuerySnapshot>(
        stream: db.collection('Exercises').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else
            return ListView(
              children: (snapshot.data! as QuerySnapshot).docs.map((doc) {
                return Card(
                  child: ListTile(
                    title: Text(doc.data()['name']),
                  ),
                );
              }).toList(),
            );
        },
      ),
    );
  }
}

但是当我这样做时，我的应用程序中出现错误： Image of the Error

感谢您的帮助

【问题讨论】：

您需要MaterialApp 作为根小部件，因此您需要Scaffold > StreamBuilder > ... 而不是MaterialApp > Scaffold > StreamBuilder > ...
感谢您的回答。现在它起作用了。祝你有美好的一天
当然，欢迎您，也祝您有愉快的一天

标签： database flutter listview google-cloud-firestore

【解决方案1】：

不能直接在脚手架中使用StreamBuilder，添加Column或者SinglechildScrollview或者Container。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final db = FirebaseFirestore.instance;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(  // Column, Singlechild Scroll view Here
        children: [
          StreamBuilder<QuerySnapshot>(
            stream: db.collection('Exercises').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              } else
                return ListView(
                  children: (snapshot.data! as QuerySnapshot).docs.map((doc) {
                    return Card(
                      child: ListTile(
                        title: Text(doc.data()['name']),
                      ),
                    );
                  }).toList(),
                );
            },
          ),
        ],
      ),
    );
  }
}

【讨论】：

如果您发现 Null-Safety 错误，请在 init() 函数中使用 Stream。然后调用流
首先感谢您的回答。我用 Column 和 SinglechildScrollview 尝试过，但后来我得到另一个错误，即 Scaffold 中缺少 MediaQuery 小部件

【解决方案2】：

首先感谢您的回答。我用 Column 和 SinglechildScrollview 进行了尝试，但后来我得到另一个错误，即缺少 MediaQuery 小部件

MediaQuery Error

【讨论】：