FlutterでGoogleMapとPersistentBottomsheetを実装した

実際の画面

準備

• GoogleMapAPIを利用可能な状態にする。(android/ios)
• google_maps_flutterのReadmeにしたがってセッティングをする。

利用ライブラリ

• google_maps_flutter: ^0.5.27
  • https://pub.dev/packages/google_maps_flutter
• sliding_up_panel: ^1.0.2
  • https://pub.dev/packages/sliding_up_panel

実装

GoogleMapのコードに関しては、flutter_google_mapsのチュートリアルコードそのままです。
SlidingUpPanelは画面の要素を、"collapsed（前景）","panel（前景）","body（背景）"が分けており、前景はDraggableなPersistentBottomSheetとして利用することができ、collapseとpanelにシームレスに遷移することが可能です。
SlidingUpPanelはデフォルトでコントローラを保有してますが、任意のPanelControllerを利用して、個別の実装からcollapsedとpanelの状態を変更することができます。

  Widget build(BuildContext context) {
    BorderRadiusGeometry radius = BorderRadius.only(
      topLeft: Radius.circular(10.0),
      topRight: Radius.circular(10.0),
    );
    return new Scaffold(
      body: SlidingUpPanel(
        minHeight: 50.0,
        collapsed: Column( <<　閉じている時の画面
          children: <Widget>[
            SizedBox(
              height: 10.0,
            ),
            Center(
              child: Container(
                width: 30.0,
                height: 4.0,
                decoration: BoxDecoration(
                  color: Colors.grey.shade400,
                  borderRadius: BorderRadius.all(
                    Radius.circular(2.5),
                  ),
                ),
              ),
            ),
            Container(
              decoration:
                  BoxDecoration(color: Colors.white, borderRadius: radius),
              child: Center(
                child: Text(
                  "This is the collapsed Widget",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
        panel: Column( <<引き延ばした際の画面
          children: <Widget>[
            SizedBox(
              height: 10.0,
            ),
            Center(
              child: Container(
                width: 30.0,
                height: 4.0,
                decoration: BoxDecoration(
                  color: Colors.grey.shade400,
                  borderRadius: BorderRadius.all(
                    Radius.circular(2.5),
                  ),
                ),
              ),
            ),
            Flexible(
              child: ListView.builder(
                itemBuilder: (context, index) => Container(
                  height: 150,
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(color: Colors.grey, width: 0.3),
                    ),
                  ),
                  child: ListTile(
                    leading: Image.asset(_shops[index].imagePath),
                    title: Text(
                      _shops[index].shopName,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    subtitle: Text(
                      _shops[index].description,
                      style: TextStyle(
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                ),
                itemCount: _shops.length,
              ),
            ),
          ],
        ),
        body: GoogleMap(
          mapType: MapType.normal,
          initialCameraPosition: _kGooglePlex,
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
          markers: createMarker(),
        ),
        //maxHeight: MediaQuery.of(context).size.height * 3 / 4,
        controller: _panelController,
        borderRadius: radius,
      ),
    );
  }

iOS用の設定で詰まったところ

google_maps_flutterのGetting Startedに従い、AppDelegate.swiftに追記したが
iOSのSimurator起動時にNo such module 'GoogleMaps'が発生。
Podfileが存在しておらず、Androidstudioのguiでビルドした際に、Poffileが作成されていなかったので発生していた模様。
ターミナルからビルドすれば、自動的に作成されるので、詰まったら試してください。