如何在此应用的 Appbar 中添加搜索选项？答案

【问题标题】：How do I add search option in this app's Appbar?如何在此应用的 Appbar 中添加搜索选项？
【发布时间】：2021-05-18 15:04:01
【问题描述】：

我想在这个应用程序中添加搜索选项。在 Appbar 中添加搜索栏，然后在 Listview 中创建过滤器/搜索。

这意味着，在我的 Appbar 中，如果它与列表中的任何项目匹配，我将在搜索栏中输入，它会显示该项目。列表的数据来自 CSV 文档。所以我觉得它很复杂。

我该怎么做？我已在帖子中部分附加了我的代码。

提前致谢。

first part of the code

middle part of the code

last part of the code

【问题讨论】：

欢迎来到Stack Overflow。虽然包含链接可能会有所帮助，但问题应该是独立的，因此请添加 minimal reproducible example 显示您尝试过的内容。关于问题。此外，按照How to Ask 中的建议，添加您的搜索工作的简要说明。
检查一下，希望对你有帮助https://stackoverflow.com/questions/50567295/listview-filter-search-in-flutter

标签： flutter dart

【解决方案1】：

您可以在 appBar 中将搜索栏添加为title。

 title: Padding(
                padding: EdgeInsets.only(top: 8),
                child: Container(
                    height: 40,
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 15),
                    decoration: BoxDecoration(
                        color: Color.fromARGB(70, 255, 255, 255),
                        borderRadius: BorderRadius.all(Radius.circular(15.0))),
                    child: TextFormField(
                      textInputAction: TextInputAction.search,
                      onFieldSubmitted: (value) async {},
                      style: TextStyle(color: Colors.white, fontSize: 15),
                      cursorColor: Colors.white,
                      textAlign: TextAlign.left,
                      controller: _textFieldController,
                      decoration: InputDecoration(
                          suffixIcon: Row(
                            mainAxisAlignment:
                                MainAxisAlignment.spaceBetween, // added line
                            mainAxisSize: MainAxisSize.min, // added line
                            children: <Widget>[
                              Padding(
                                  padding: EdgeInsets.only(left: 10, right: 10),
                                  child: InkWell(
                                      onTap: () async {},
                                      child: Icon(Icons.search,
                                          color: Colors.white))),
                            ],
                          ),
                          isDense: true,
                          border: InputBorder.none,
                          hintText: "Search",
                          contentPadding:
                              EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 10.0),
                          hintStyle:
                              TextStyle(color: Colors.white, fontSize: 15)),
                    ))),

【讨论】：

其实我想要的，如果它与列表中的任何项目匹配，我会在搜索栏中输入一个输入，它会显示该项目。列表的数据来自 CSV 文档。所以我觉得它很复杂。你能给我解决方案吗？我已在帖子中部分附加了我的代码。（对不起，我无法正确提问）