FlutterでGoogleMapとPersistentBottomsheetを実装した

### 実際の画面
![googlemap_with_persistentbottomsheet.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526878/536fdc79-0b29-f912-70d4-2abff93bb1b9.gif)

### 準備
- 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



### 実装

https://github.com/kiriko-rs/day3_point_in_map

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が作成されていなかったので発生していた模様。
ターミナルからビルドすれば、自動的に作成されるので、詰まったら試してください。