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

Question

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

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

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

提前致谢。

代码的第一部分

代码中间部分

代码的最后一部分

标签： flutterdart

Answer 1

title您可以像在 appBar 中一样添加搜索栏。

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