当我单击 Google Map Flutter 上的标记时，我想显示模态底页答案

【问题标题】：I want show Modal Bottom Sheet when I click the marker on Google Map Flutter当我单击 Google Map Flutter 上的标记时，我想显示模态底页
【发布时间】：2019-06-17 17:47:12
【问题描述】：

class Peta extends StatefulWidget {
    _PetaState createState() => _PetaState();}

class _PetaState extends State<Peta> {
  Completer<GoogleMapController> _controller = Completer();

  void initState() {super.initState();}
  void _onMapCreated(GoogleMapController controller) {_controller.complete(controller);}

 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text("PETA"),backgroundColor: Colors.lightGreenAccent[700],)
   body: Stack(children: <Widget>[_peta(context),])
  )
 }

 Widget _peta(BuildContext context) {
  return Container(height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width,
   child: GoogleMap(onMapCreated: _onMapCreated, mapType: MapType.normal,
    initialCameraPosition: CameraPosition(target: LatLng(-1.265386, 116.831200), zoom: 14),
    markers: {marker1, marker2},
   )
  );
 }
}

Marker marker1 = Marker(markerId: MarkerId("TOKO 1"), position: LatLng(-1.277025, 116.829049),
 infoWindow: InfoWindow(title: "TOKO MAKMUR"),
 icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen,),
 onTap: () {
  showModalBottomSheet(
   context: context, /// this line is error
   builder: (builder){return Container(......)}
  );
 }
)

这是我的代码。我想展示一些标有底页的地方的细节。我不知道如何将上下文传递给它。我已经尝试过类似问题的一些答案，但我也遇到了“onMarkerTapped”方法的麻烦。我已经用过其他的地图插件，它的工作，但地图的质量很差。请帮忙

【问题讨论】：

标签： android google-maps flutter

【解决方案1】：

您的底部工作表模式应如下所示：

void _showModal() {
    Future<void> future = showModalBottomSheet<void>(
      context: context,
      builder: (BuildContext context) {
        return Container(
                child: Wrap(
                   children: <Widget>[
                        ListTile(
                           leading: Icon(Icons.star),
                           title: Text("Favorite"),
                        ),
                        ListTile(
                           leading: Icon(Icons.close),
                           title: Text("Cancel"),
                        ),
                  ],
            ),
        );
      },
    );
  future.then((void value) => _closeModal(value));
}

void _closeModal(void value) {

}

然后您可以通过 onTap 手势调用它：

onTap: () {
   _showModal();
},

【讨论】：

非常感谢您，先生。我已经按照您的代码进行了操作，但是当我在 Marker 中调用方法 _showModal() 时再次出现错误。
你能提供错误吗？你有你的 _showModal(); Stateful Widget 中的方法？
Marker marker1 = Marker(markerId: MarkerId("TOKO 1"),position: LatLng(-1.277025, 116.829049),infoWindow: InfoWindow(title: "TOKO MAKMUR"),onTap: () {_showModal(); /// this line error}, );是的，穿上它。我把方法 _showModal() 放在方法 _onMapCreated() 之后，Marker 也放在小部件 _peta 之后
你能用这个上传你当前的有状态小部件吗？或该行中有错误的屏幕截图。通常，IDE 会告诉您遇到了哪个错误。
对不起，我不知道如何在此评论中格式化代码

【解决方案2】：

使用 pub 包中的上下文持有者 https://pub.dev/packages/context_holder

【讨论】：