如何在 Flutter 的 Google 地图上制作浮动搜索栏？答案

【问题标题】：How to make a floating search bar on top of Google Maps in Flutter?如何在 Flutter 的 Google 地图上制作浮动搜索栏？
【发布时间】：2020-01-04 13:07:58
【问题描述】：

我正在尝试在我的地图上制作一个浮动搜索栏，就像 Google 地图应用中的搜索栏一样。像这样 -

我似乎无法让它漂浮。搜索栏不会覆盖在地图上。它只是在自己的框中呈现。



    void main() {
      runApp(MaterialApp(
        title: 'Navigation Basics',
        theme: ThemeData.dark(),
        home: MyAppState(),
      ));
    }

    class MyAppState extends StatelessWidget {
      final LatLng _center = const LatLng(28.535517, 77.391029);

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: FloatAppBar(),
            body: Map(_center),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Report()),
                );
              },
              child: Icon(Icons.add, semanticLabel: 'Action'),
              backgroundColor: Colors.black87,
            ),
            floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
            bottomNavigationBar: BottomNavBar(),
          ),
        );
      }
    }


    class FloatAppBar extends StatelessWidget with PreferredSizeWidget {
      @override
      Widget build(BuildContext context) {
        return (FloatingSearchBar(
          trailing: CircleAvatar(
            child: Text("RD"),
          ),
          drawer: Drawer(
            child: Container(),
          ),
          onChanged: (String value) {},
          onTap: () {},
          decoration: InputDecoration.collapsed(
            hintText: "Search...",
          ),
          children: [
          ],
        ));
      }

      @override
      Size get preferredSize => Size.fromHeight(kToolbarHeight);
    }

我希望搜索栏漂浮在地图顶部，但它会呈现在自己的框中。

【问题讨论】：

标签： google-maps flutter flutter-layout

【解决方案1】：

我在这里取得了相同的结果：

代码：

Stack(
      children: <Widget>[
        // Replace this container with your Map widget
        Container(
          color: Colors.black,
        ),
        Positioned(
          top: 10,
          right: 15,
          left: 15,
          child: Container(
            color: Colors.white,
            child: Row(
              children: <Widget>[
                IconButton(
                  splashColor: Colors.grey,
                  icon: Icon(Icons.menu),
                  onPressed: () {},
                ),
                Expanded(
                  child: TextField(
                    cursorColor: Colors.black,
                    keyboardType: TextInputType.text,
                    textInputAction: TextInputAction.go,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        contentPadding:
                            EdgeInsets.symmetric(horizontal: 15),
                        hintText: "Search..."),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(right: 8.0),
                  child: CircleAvatar(
                    backgroundColor: Colors.deepPurple,
                    child: Text('RD'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),

【讨论】：

【解决方案2】：

更新

我认为现在这将更适合你 => FloatingSearchBar by Rody Darvis :")

【讨论】：