如何在 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：“）