时间戳

首页 > 解决方案 > 当我单击 Google Map Flutter 上的标记时，我想显示模态底页

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

问题描述

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”方法的麻烦。我已经用过其他的地图插件，它的工作，但地图的质量很差。请帮忙

标签： androidgoogle-mapsflutter

解决方案

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

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

推荐阅读