How to make AppBar fully rounded with a field text

Question

I'd like to make the AppBar fully rounded and with a search field like in this image:

The closest that I got was this:

My code:

return new Scaffold(
  backgroundColor: Colors.grey[200],
  appBar: AppBar(
    backgroundColor: Colors.grey[200],
    title: _searchField(),
    shape: ContinuousRectangleBorder(
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(30),
            bottomRight: Radius.circular(30))),
  ),
  body: new Container(
    child: new Column(children: list),
  ),
  bottomNavigationBar: _getBottomNavigationBa(),
);


Widget _searchField() {
return Material(
  child: TextField(
    decoration: new InputDecoration(
      contentPadding: EdgeInsets.all(6),
      prefixIcon: Icon(Icons.search),
      focusedBorder: const OutlineInputBorder(
        borderSide: BorderSide(color: Colors.teal),
      ),
      border: const OutlineInputBorder(
        borderSide: BorderSide(color: Colors.teal),
      ),
      enabledBorder: new OutlineInputBorder(
        borderSide: new BorderSide(color: Colors.teal, width: 0.0),
        borderRadius: const BorderRadius.all(
          const Radius.circular(25.0),
        ),
      ),
      hintText: 'O que você procura?',
    ),
  ),
);

}

The borderRadius property not working into AppBar Widget.

Answer 1

Use PreferredSize widget for a custom appbar

return new Scaffold(
  backgroundColor: Colors.grey[200],
  appBar: PreferredSize(
          preferredSize: const Size(double.infinity, kToolbarHeight * 2),
          child: SafeArea(
            child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 10.0),
               child: _searchField()          
             ),
          ),
        ),
  body: new Container(
    child: new Column(children: list),
  ),
  bottomNavigationBar: _getBottomNavigationBa(),
);
// rest of your code

Answer 2

You can change the widget of textfield like below.

Widget _searchField() {
  return Container(
    decoration: new BoxDecoration(
      borderRadius: BorderRadius.circular(25),
      boxShadow: [
        new BoxShadow(
          color: Colors.black12,
          blurRadius: 3.0,
        ),
      ],
    ),
    child: Card(
      elevation: 3,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
      child: Padding(
        padding: const EdgeInsets.all(0.2),
        child: TextField(
          decoration: new InputDecoration(
            contentPadding: EdgeInsets.all(6),
            prefixIcon: Icon(Icons.search),
            focusedBorder: const OutlineInputBorder(
                borderSide: BorderSide(color: Colors.teal),
                borderRadius: const BorderRadius.all(
                  const Radius.circular(25.0),
                )),
            border: const OutlineInputBorder(
                borderSide: BorderSide(color: Colors.teal),
                borderRadius: const BorderRadius.all(
                  const Radius.circular(25.0),
                )),
            enabledBorder: new OutlineInputBorder(
              borderSide: new BorderSide(color: Colors.teal, width: 0.0),
              borderRadius: const BorderRadius.all(
                const Radius.circular(25.0),
              ),
            ),
            hintText: 'O que você procura?',
          ),
        ),
      ),
    ),
  );
}