Search code examples
fluttersearchyelpgoogle-search-appliance

Flutter Search bar in ActionBar like yelp app


I am trying to build an application location base and I want a search bar like this image shows. That search bar should be able search for locations and text. Does anyone have a pre-built search bar like this?

enter image description here


Solution

  • You can create you own custom app Bar.Simply give appBar property(in Scaffold) an PreferredSize and design as you like. Below is the implementation:

    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
      return Scaffold(
        appBar:PreferredSize(
            preferredSize: Size.fromHeight(45.0),
                    //give child any Widget you like
           child: Center( 
            child: Container(
               width:MediaQuery.of(context).size.width*0.9,
              height:100,
              child:Center(child: Text("CUSTOM APP BAR")),
              color:Colors.blueAccent,
            ),
          ),
        ),
      );
     }
    }