Flutter 如何在Flatter中的streambuilder顶部添加文本框？

我的结构一定有问题

我有一个使用Firestore动态构建的listview，它工作得很好，但是我试图在列表顶部添加一个文本框，以便创建一个“过滤器”或“搜索”

下面是示例代码：

import 'dart:ui';

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

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

class MyApp extends StatelessWidget {
//  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Testing App',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      // home: MyHomePage(title: 'Testing App'),
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Widget _buildListItem(BuildContext context, DocumentSnapshot document){
    return Card(
        //height: 50,
        color: Colors.amber[600],
      //padding: EdgeInsets.all(2.0),
      child: Row(
        children: [
          Container(
            padding: EdgeInsets.all(5.0),
            color: Colors.red,
            child: Text("Image"),
            width: 85,
              //height: 75
          ),
          Expanded(
              //color: Colors.cyan,
              //padding: EdgeInsets.all(2.0),
              child: Row(
                  //crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Column(
                    children: [
                      //Icon(Icons., color: Colors.green[500]),
                      Text("Text 1", style: TextStyle(fontWeight: FontWeight.bold)),
                      Text(document['test1'].toString()),
                      Text("Text 2", style: TextStyle(fontWeight: FontWeight.bold)),
                      Text(document['test2'].toString()),
                    ],
                  ),
                  ]
              )
          ),
        ],
      ),

    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Testing App"),
      ),
      body:
        <<------ ADD TEXT BOX HERE ---->>
        StreamBuilder(
            stream: FirebaseFirestore.instance.collection('firestoretest').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) return const Text('Loading...');
              return ListView.builder(
                  itemExtent: 80.0,
                  itemCount: snapshot.data.docs.length,
                  itemBuilder: (context, index) =>
                      _buildListItem(context, snapshot.data.docs[index])
              );
            }
        ),
    );
  }
}

导入“dart:ui”；
进口“包装：颤振/材料.省道”；
导入“包：firebase_core/firebase_core.dart”；
导入“包：cloud_firestore/cloud_firestore.dart”；
void main（）异步{
WidgetsFlutterBinding.ensureInitialized（）；
等待Firebase.initializeApp（）；
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
//静态常量字符串_title='颤振代码示例'；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“测试应用程序”，
主题：主题数据(
原色样本：颜色。深紫色，
),
//主页：我的主页（标题：“测试应用程序”），
家：脚手架(
正文：MyHomePage（），
),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
小部件_buildListItem（BuildContext上下文，DocumentSnapshot文档）{
回程卡(
//身高：50，
颜色：颜色。琥珀色[600]，
//填充：所有边缘设置（2.0），
孩子：排(
儿童：[
容器(
填充：所有边缘设置（5.0），
颜色：颜色，红色，
子项：文本（“图像”），
宽度：85，
//身高：75
),
扩大(
//颜色：Colors.cyan，
//填充：所有边缘设置（2.0），
孩子：排(
//crossAxisAlignment:crossAxisAlignment.stretch，
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
纵队(
儿童：[
//图标（图标，颜色：Colors.green[500]），
文本（“文本1”，样式：TextStyle（fontWeight:fontWeight.bold）），
文本（文档['test1'].toString（）），
文本（“文本2”，样式：TextStyle（fontWeight:fontWeight.bold）），
文本（文档['test2'].toString（）），
],
),
]
)
),
],
),
);
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“测试应用程序”），
),
正文：
StreamBuilder(
流：FirebaseFirestore.instance.collection（'firestoretest'）.snapshots（），
生成器：（上下文，快照）{
如果（！snapshot.hasData）返回常量文本（'Loading…'）；
返回ListView.builder(
项目范围：80.0，
itemCount:snapshot.data.docs.length，
itemBuilder：（上下文，索引）=>
_buildListItem（上下文、快照、数据、文档[索引]）
);
}
),
);
}
}

我曾尝试在儿童中添加streambuilder，但没有任何结果

这是我在谷歌教程中找到的示例的修改版本

非常感谢您的帮助

看看这是否解决了问题

return Scaffold(
    appBar: AppBar(
      title: Text("Testing App"),
    ),
    body: Column(
      children: [
        Text("<<------ ADD TEXT BOX HERE ---->>"),
        Expanded(
          child: StreamBuilder(
              stream: FirebaseFirestore.instance
                  .collection('firestoretest')
                  .snapshots(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) return const Text('Loading...');
                return ListView.builder(
                    itemExtent: 80.0,
                    itemCount: snapshot.data.docs.length,
                    itemBuilder: (context, index) =>
                        _buildListItem(context, snapshot.data.docs[index]));
              }),
        )
      ],
    ));

返回脚手架(
appBar:appBar(
标题：文本（“测试应用程序”），
),
正文：专栏(
儿童：[
正文（“”），
扩大(
孩子：StreamBuilder(
流：FirebaseFirestore.instance
.collection（'firestoretest'）
.snapshots（），
生成器：（上下文，快照）{
如果（！snapshot.hasData）返回常量文本（'Loading…'）；
返回ListView.builder(
项目范围：80.0，
itemCount:snapshot.data.docs.length，
itemBuilder：（上下文，索引）=>
_buildListItem（上下文、快照、数据、文档[索引]）；
}),
)
],
));

在streamBuilder中，用列包装ListviewBuilder，并在其顶部放置文本小部件。使用listView builder的ShrinkWrap属性并将其设置为“true”，这就是为什么您看不到任何结果，因为存在render flex错误。 像这样：

StreamBuilder(
  stream: FirebaseFirestore.instance.collection('firestoretest').snapshots(),
  builder: (context, snapshot) {
          if (!snapshot.hasData) return const Text('Loading...');
          return Column(children[
          Text('Hiii'),
          ListView.builder(
          shrinkWrap: true, 
          //This is very important, without shrinkWrap, you'll get an error 
          //saying:'package:flutter/src/rendering/box.dart':
          //Failed assertion: line 1940 pos 12: 'hasSize'
          //The relevant error-causing widget was Column.

            itemExtent: 80.0,
            itemCount: snapshot.data.docs.length,
            itemBuilder: (context, index) =>
                      _buildListItem(context, snapshot.data.docs[index])
              ]));
            }
        ),

---

我也会试试这个谢谢！正如您所提到的，您希望添加一个文本框用于搜索，您将需要来自流的最新更新项，这就是为什么我假设它应该位于流生成器中的原因。