Google Maps Searchbar in Flutter

Question

Is the Searchbar in google apps such as Gmail, Goole Maps an AppBar with integrated Searchbar or just a Searchbar put on top of the rest of the body?

I'm trying to implement something like that with Flutter. Just a SearchBar on top of the rest of the screen.

Stack(
          children: [
            MyPage(
            ),
            const Padding(
              padding: EdgeInsets.all(16.0),
              child: SearchBar(),
            ),
          ],
        ),

It looks fine but I don't know if it is best pratice.

This is the expected output from Google Maps

Answer 1

Just a SearchBar on top of the rest of the screen.

while I don't see a problem using a Stack widget, you might want to still consider using an AppBar on the Scaffold:

 Scaffold(
        backgroundColor: Colors.grey[900],
        appBar: AppBar(
          title: Card(
            child: TextField(
              decoration: InputDecoration(
                hintText: '',
                prefixIcon: Icon(Icons.search),
                border: InputBorder.none,
                ),
            ),
          ),
        ),
        body: Center(
          child: Container(
            child: Text('Hello World'),
          ),
        ),
      )