Flutter 中的 Google 地图搜索栏

Question

Gmail、Goole Maps 等 Google 应用程序中的搜索栏是带有集成搜索栏的 AppBar 还是只是将搜索栏放在主体的其余部分之上？

我正在尝试用 Flutter 实现类似的东西。只是屏幕其余部分顶部的搜索栏。

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

看起来不错，但我不知道这是否是最佳实践。

这是 Google 地图的预期输出

Answer 1

只是屏幕其余部分顶部的搜索栏。

虽然我没有发现使用

Stack

小部件有问题，但您可能仍然需要考虑在

AppBar

上使用

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'),
          ),
        ),
      )