'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 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vinay Jain