How to create toolbar searchview in Flutter

Question

Hi Guys,

I have created a Flutter App. I want to create a toolbar search view in Flutter App. How can I do that?

Answer 1

Hi@akhtar,

You can create an Icon in your App bar. This Icon is used for searching as shown below. You just need to add these codes to your app bar.

actions: <Widget>[
          new IconButton(icon: actionIcon,onPressed:(){
          setState(() {
                     if ( this.actionIcon.icon == Icons.search){
                      this.actionIcon = new Icon(Icons.close);
                      this.appBarTitle = new TextField(
                        style: new TextStyle(
                          color: Colors.white,
                        ),
                        decoration: new InputDecoration(
                          prefixIcon: new Icon(Icons.search,color: Colors.white),
                          hintText: "Search...",
                          hintStyle: new TextStyle(color: Colors.white)
                        ),
                      );}
                      else {
                        this.actionIcon = new Icon(Icons.search);
                        this.appBarTitle = new Text("AppBar Title");
                      }
                    });
        } ,),]