如何在 Flutter 中的 Google Maps 顶部制作浮动搜索栏？

Question

我正在尝试在我的地图顶部制作一个浮动搜索栏，就像谷歌地图应用程序中的搜索栏一样。 像这样的东西——

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

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

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

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

Answer 2

更新

我觉得现在这样会更适合你=> FloatingSearchBar通过罗迪Darvis：“）