如何使 flutter Flipkart 像主页中的搜索视图一样？

Question

如何在主页中制作 Flutter 类似 Flipkart 的搜索视图？
是否有 Widget 可用？
我要找的是右侧Icon的输入框和可以选择的搜索建议列表。

在 Flutter 中是否有类似此搜索栏的小部件可用？

Answer 1

这可以使用 TextField 来完成。看看下面的代码：

Widget searchField() {
    return TextField(
      autofocus: true,
      decoration: InputDecoration(
          hintText: "search",
          prefixIcon: Icon(Icons.search),
          suffixIcon: IconButton(
            icon: Icon(Icons.close),
            onPressed: (){
              print("cancel");
            },
          ),
          fillColor: Colors.white,
          filled: true),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
          child: Container(
            width: 300.0,
            child: searchField(),
          ),
          preferredSize: Size.square(50.0),
        ),
        title: Text("example"),
        actions: <Widget>[
          Switch(
            value: widget.stateofSwitch,
            onChanged: (value) {
              setState(() {
                darkThemeEnabled = value;
              });
            },
          )
        ],
      ),
      body: 
      ),

    );
  }

这将导致

如何使 flutter Flipkart 像主页中的搜索视图一样？

How to make flutter Flipkart like search view in homepage?

flutter

flutter-dependencies

flutter-layout