English 中文(简体)
如何使一条多线看不见?
原标题: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.
My problem is after that whenever i click anywhere else, the Polyline doesn t become invisible again and just stays there forever.

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

我试图用<条码>彩虹/条码>把植被填上<条码>,但失败,并击中了死端。 Maybe flutter_map_tappable_polyline 可帮助?

问题回答

这可能不是这样做的最佳途径,而是说明:

页: 1

2- 附加活动手,State。 例:

void _onMarkerTap() {
    setState(() {
      _isPolyLineVisible = !_isPolyLineVisible;
    });
  }

3- 为您添加一个孩子:Marker(可在标识之前或中添加标记(第5步))

∗∗∗∗∗∗

www.un.org/Depts/DGACM/index_french.htm PolyLine Layer。 例:

MarkerLayer(markers: markers),
      if (_isPolyLineVisible)
        PolylineLayer(......

6- 答复

正如我先前所说的那样,你可能找到比这更好的办法。





相关问题
Flutter App cannot be installed on Android TV

I m building a Flutter app that should support Android TV and Mobile devices. Despite Google Play shows that it is supported, I cannot install app on my MiBox device. While trying to install it, both ...

Moving the icon button to the right causes rendering issues

I am trying to align the icon button to the right of the Text field, I tried the row which made the icon button not centered vertically and now I am trying out the Stack widget. Here is my code - ...

热门标签