Am using flutter_map and at first i set up couple of markers and polylines in a way that a when a certain marker is pressed a certain polyline would show up but my problem is after that whenever i click anywhere else the polyline doesn’t become invisible again and just stays there forever, this is probably easy to do but am just a beginner and sorry for the confusing code any help would be appreciated.
import 'package:dilni/views/maproutes.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
import 'package:latlong2/latlong.dart';
import 'package:geolocator/geolocator.dart';
class Route1MarkerWidget extends StatefulWidget {
final LatLng point;
final ValueChanged<bool> onTap;
const Route1MarkerWidget(
{super.key, required this.point, required this.onTap});
@override
State<Route1MarkerWidget> createState() => _Route1MarkerWidgetState();
}
class _Route1MarkerWidgetState extends State<Route1MarkerWidget> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => widget.onTap(true),
child: const Icon(
Icons.location_on,
color: Color.fromARGB(255, 230, 156, 18),
),
);
}
}
class Route2MarkerWidget extends StatefulWidget {
final LatLng point;
final ValueChanged<bool> onTap;
const Route2MarkerWidget(
{super.key, required this.point, required this.onTap});
@override
State<Route2MarkerWidget> createState() => _Route2MarkerWidgetState();
}
class _Route2MarkerWidgetState extends State<Route2MarkerWidget> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => widget.onTap(true),
child: const Icon(
Icons.location_on,
color: Color.fromARGB(255, 212, 12, 186),
),
);
}
}
class MapStart extends StatefulWidget {
const MapStart({super.key});
@override
State<MapStart> createState() => _MapStartState();
}
class _MapStartState extends State<MapStart> {
MapController mapController = MapController();
LatLng currentCenter = const LatLng(40.667578954102694, -73.90336806212608);
Future<void> _requestLocationPermission() async {}
@override
void initState() {
super.initState();
_requestLocationPermission().then((_) async {});
}
_centerOnMyLocation() async {
Position position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
LatLng userLocation = LatLng(position.latitude, position.longitude);
mapController.move(userLocation, mapController.camera.zoom);
}
bool _showLine1 = false;
bool _showLine2 = false;
@override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
return Scaffold(
body: FlutterMap(
mapController: mapController,
options: MapOptions(
initialCenter: currentCenter,
initialZoom: 14.5,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'tn.dilni.dilni',
),
CurrentLocationLayer(),
MarkerLayer(
markers: [
Marker(
point: const LatLng(40.6693937337096, -73.90390454876147),
child: Route1MarkerWidget(
point: const LatLng(40.6693937337096, -73.90390454876147),
onTap: (bool showPolyline) =>
setState(() => _showLine1 = showPolyline),
),
),
Marker(
point: const LatLng(40.66582935431103, -73.9030140553811),
child: Route2MarkerWidget(
point: const LatLng(40.66582935431103, -73.9030140553811),
onTap: (bool showPolyline) =>
setState(() => _showLine2 = showPolyline),
),
),
],
),
PolylineLayer(
polylines: [
_showLine1
? Polyline(
points: route1pl.points,
strokeWidth: 10.0,
color: Colors.red)
: Polyline(
points: route1pl.points, color: Colors.transparent),
],
),
PolylineLayer(polylines: [
_showLine2
? Polyline(
points: route2pl.points,
strokeWidth: 10.0,
color: const Color.fromARGB(255, 13, 172, 55))
: Polyline(points: route2pl.points, color: Colors.transparent)
]),
]),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () {
mapController.rotate(0.0);
},
tooltip: 'Orient North',
child: const Icon(Icons.navigation),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: () {
mapController.move(
mapController.camera.center, mapController.camera.zoom + 1.0);
},
tooltip: 'Zoom In',
child: const Icon(Icons.zoom_in),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: () {
mapController.move(
mapController.camera.center, mapController.camera.zoom - 1.0);
},
tooltip: 'Zoom Out',
child: const Icon(Icons.zoom_out),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: _centerOnMyLocation,
tooltip: 'Center on Me',
child: const Icon(Icons.my_location),
),
const SizedBox(height: 10),
],
),
);
}
}
I tried to wrap the fluttermap widget with a gesturedetector but failed and hit a dead end and maybe flutter_map_tappable_polyline could help.
Redraw it in XOR mode.