如何从其他屏幕在GoogleMap的第一个屏幕上添加标记

Question

我有一个带有GoogleMap Widget的主屏幕。我在那里展示标记。当我从第三个屏幕添加一个标记到标记列表时，列表会更新，但GUI不会。第一个屏幕通过路由将列表发送到第二个屏幕，然后发送到第三个屏幕。当我移动地图时，会出现标记。但当我回到第一个屏幕时却没有。

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late GoogleMapController mapController;
MarkerList markersList = MarkerList();
Route _createRouteToSecondScreen(MarkerList markerList) {
return PageRouteBuilder(
opaque: false,
pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(
centerMove: LatLng(-33.865143, 151.209900),
markerList: markerList,
),
);
}
Future<void> _onMapCreated(GoogleMapController controller) async {
mapController = controller;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: GoogleMap(
markers: Set<Marker>.of(markersList.markers),
mapType: MapType.hybrid,
myLocationButtonEnabled: false,
myLocationEnabled: true,
compassEnabled: false,
onMapCreated: _onMapCreated,
onCameraMove: (CameraPosition cp) {
setState(() {});
},
initialCameraPosition: const CameraPosition(
target: LatLng(0, 0), //_center
zoom: 2,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.of(context).push(_createRouteToSecondScreen(markersList));
},
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:test_map/thirdScreen.dart';
import 'markerList.dart';
class SecondScreen extends StatefulWidget {
final LatLng centerMove;
final MarkerList markerList;
const SecondScreen({
super.key,
required this.centerMove,
required this.markerList,
});
@override
SecondScreenState createState() => SecondScreenState();
}
class SecondScreenState extends State<SecondScreen> {
//late MarkerList copyMarkerList;
@override
void initState() {
super.initState();
}
Route _createRouteInfo(LatLng latlng, MarkerList markerList) {
return PageRouteBuilder(
opaque: false,
pageBuilder: (context, animation, secondaryAnimation) => ThirdScreen(
latlng: latlng,
markersList: markerList,
));
}
@override
Widget build(BuildContext context) {
return Material(
child: InkWell(
onTap: () async {
Navigator.of(context).push(_createRouteInfo(widget.centerMove, widget.markerList));
},
child: Stack(
alignment: Alignment.center,
children: [
Container(
height: 60.0,
color: Color(0xff28B39E),
),
Text(
"Continue",
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
],
)));
}
}

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:uuid/uuid.dart';
import 'markerList.dart';
class ThirdScreen extends StatefulWidget {
final LatLng latlng;
final MarkerList markersList;
const ThirdScreen({
super.key,
required this.latlng,
required this.markersList,
});
@override
ThirdScreenState createState() => ThirdScreenState();
}
class ThirdScreenState extends State<ThirdScreen> {
var uuid = Uuid();
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Material(
child: InkWell(
onTap: () {
widget.markersList.addMarker(
Marker(
markerId: MarkerId(uuid.v1().toString()),
position: LatLng(widget.latlng.latitude, widget.latlng.longitude),
),
);
setState(() {});
int count = 0;
Navigator.of(context).popUntil((_) => count++ >= 2);
},
child: Stack(
alignment: Alignment.center,
children: [
Container(
height: 60.0,
color: Color(0xff28B39E),
),
Text(
"Add marker",
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
],
)));
}
}

这里是我的markersList类:

import 'package:flutter/foundation.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class MarkerList extends ChangeNotifier {
final Set<Marker> _markers = <Marker>{};
Set<Marker> get markers => _markers;
void addMarker(Marker marker) {
_markers.add(marker);
notifyListeners();
}
}

我希望能够添加一个标记到列表中，特别是当我返回到第一个屏幕时，它以图形方式显示在地图上。无需移动卡片，只需添加。

Answer 1

我找到了一个解决方案:在_MyHomePageState我添加:

FutureOr onGoBack(dynamic value) {
setState(() {});
}

当route被调用时:

Navigator.of(context).push(_createRouteToSecondScreen(markersList)).then(onGoBack);