我已经为学习Firebase创建了一个简单的演示页面,

这里我有一个文本字段、搜索按钮和StreamBuilder,用于显示所有记录

我已经设置了一个条件,当文本字段为空时显示所有记录...

在这里,我使用了一个刚刚重新生成的按钮...只是在它内部按下了setState

一切都很好,但我只是想改善记录应该是过滤的同时在文本框上打字,这样就不需要按钮了.

如何在文本字段Change中调用StreamBuilder的流...此外,我还创建了CustomTextField,因此如何将函数作为onChange传递需要一个值...

以下是我的代码

Column(
          children: [
            SizedBox(
              height: 40,
            ),
            CustomTextField(
                hint: 'Search Email', controller: txtsearchcontroller),
            SizedBox(
              height: 20,
            ),
            CupertinoButton(
                child: Text('Search'),
                onPressed: () {
                  setState(() {});
                }),
            SizedBox(
              height: 30,
            ),
            StreamBuilder(
                stream: txtsearchcontroller.text == ''
                    ? FirebaseFirestore.instance
                        .collection('chatusers')
                        .snapshots()
                    : FirebaseFirestore.instance
                        .collection('chatusers')
                        .where(
                          "email",
                          isEqualTo: txtsearchcontroller.text,
                          isNotEqualTo: widget.usermodel.email,
                        )
                        .snapshots(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.active) {
                    if (snapshot.hasData) {
                      QuerySnapshot querysnapshot =
                          snapshot.data as QuerySnapshot;
                      if (querysnapshot.docs.length > 0) {
                        //and suggest me if any better way instead of this following
                        List<Map<String, dynamic>> maplist = [];
                        for (int x = 0; x < querysnapshot.docs.length; x++) {
                          Map<String, dynamic> usermap = querysnapshot.docs[x]
                              .data() as Map<String, dynamic>;
                          maplist.add(usermap);
                        }

                        return Expanded(
                          child: CustomListView(maplist:maplist),
                        );
                      } else {
                        return Text('Has Data but No user Found');
                      }
                    } else {
                      if (snapshot.hasError) {
                        return Text('error found');
                      } else {
                        return Text('empty..');
                      }
                    }
                  } else {
                    return CircularProgressIndicator();
                  }
                }),

这是我的CustomTextfield

class CustomTextField extends StatelessWidget {

  final String hint;
  final bool isitpassword;
  final TextEditingController controller;
  const CustomTextField({Key? key,required this.hint,this.isitpassword=false,required this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10.0),
      child: Container(
          padding: EdgeInsets.symmetric(horizontal: 20),
          decoration: BoxDecoration(
            color: Colors.grey,
            borderRadius: BorderRadius.circular(20),
          ),

          child: TextField(
            style: TextStyle(
              fontSize: 20,color: Colors.white,),

            controller: controller,
            obscureText: isitpassword,
            decoration: InputDecoration(

              border: InputBorder.none,
              hintText: hint,
              suffixIcon: IconButton(icon: Icon(Icons.close,color: Colors.white,),onPressed: (){
                controller.text='';
              },),

            ),
          )),
    );
  }
}

推荐答案

TextField小部件具有onChanged属性,该属性将在每次更改输入时执行.

CustomTextField中,添加onChanged属性:

 TextField(
        onChanged: (value) { SetState(() {})},
        
        /* your other properties ...*/
        ),

这将为您提供所需的内容,但由于您调用的是包含TextFieldCustomTextField,因此从构造函数传递onChanged方法,这样您就可以这样使用它:

 CustomTextField(
        onChanged: () { SetState(() {})},
        hint: 'Search Email', controller: txtsearchcontroller),
        SizedBox(
          height: 20,
        ),

现在,每次输入更改时,都会执行SetState(() {}),导致重建.

Flutter相关问答推荐

未处理异常:字符串类型不是值类型子类型的子类型'

修复容器`Text`和容器表单之间的重叠

什么是dart :这只是dart ?

我怎样才能go 掉这个底部导航栏上的白色背景

参数类型';List<;Dynamic&>不能分配给参数类型';List<;SingleChildWidget&>';

Flutter为什么不;没有ListView.iterable()构造函数?

Riverpod 2.0-如何使用FutureOr和AutoDisposeSyncNotificationer处理api状态代码?

运行调试flutter应用程序时出错:B/BL超出范围(最大+/-128MB)到'';

如何在巡逻测试期间重新启动dart 侧应用程序状态?

如何使 dart 函数变得通用?

TextField 中的富文本并获取 RenderParagraph

在 Flutter 中使用条件语句设置 ImageProvider Object 类型的背景图像

如何给按钮的边框半径?

即使小部件比Flutter 中的屏幕更宽,也始终显示滚动条

使用Flutter项目设置Firebase遇到困难?这些解决方案或许能帮到你!

Flutter blue plus 库,当try 从 esp32 驱动程序获取 PlatformException 时读取特性

应用程序和应用程序内的 webview 之间的单点登录

如何更改中心的圆形进度指示器

为什么这个参数类型不能分配给参数类型?

如何从 MemoryFileSystem 字节创建假 dart:io 文件?