Question

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”方法带来的麻烦。我已经在使用其他地图插件了，可以使用，但是地图的质量很差。请帮助

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

Answer 2

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

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

2 个答案: