How to make a polyline invisible?

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.

    – 

Leave a Comment