How your add Polyline on googleMapFlutter when map is already build?

Question

I have a problem with the adding Polyline to google_map_flutter.

I add the package at my project, instanciate a googlemap on class. All is good, i see a google map on my device.

I add polyline in build googlemap and is good, i see polyline.

But how you add polyline when the map is already build ?

I try this but my polyline doesn't on view.

My code :

void aPolyline()
{
    Log.printLogDebug("APOLYLINE()");

    List<LatLng> latLngList = List();
    LatLng _one = LatLng(43.623880, 3.898790);
    LatLng _two = LatLng(43.623880, 3.91256);
    LatLng _three = LatLng(43.56325, 3.898790);
    LatLng _four = LatLng(43.53214, 3.872365);


    latLngList.add(_one);
    latLngList.add(_two);
    latLngList.add(_three);
    latLngList.add(_four);

    Polyline po =  Polyline(
                polylineId: PolylineId('test'),
                visible: true,
                points: latLngList,
                color: Colors.blue,
                width: 2,

            );



    setState(() 
    {          
         _polyline.add(po);
    });        
}

Thanks for your help.

score 0 · Answer 1 · answered Aug 22 '19 at 09:27

0

Are you using the same PolylineId? Try using a different PolylineId.

You can also post the whole StatefulWidget code so we can check it out.

answered Aug 22 '19 at 09:27

digitaljoni

1,357
1
9
12

could you help me digitaljoni ? – Silvere Aug 26 '19 at 13:38
@Silvere are you not getting any error messages? Try Set _polyline = {}; – digitaljoni Aug 26 '19 at 14:59

Silvere · Answer 2 · 2019-08-22T10:15:52.543

No,I don't use the same PolylineId because I want to see just one Polyline. I see the Polyline when she is instanciate on Googlemap build, burt when I instanciate that Polyline with a method (so after build) she is don't visible.

All code of GoogleMapW (W for widget) :

class GoogleMapsW extends StatefulWidget
{
    void addPolyline() => _GoogleMapsW().ap();

    _GoogleMapsW createState() => _GoogleMapsW();

}


class _GoogleMapsW extends State<GoogleMapsW>
{
    // Le "completer" permet de charger un widget async Future. 
    Completer<GoogleMapController> _controller = Completer();
    //GoogleMapController _controller ;

    // Icone du floatingButton
    IconData _iconFloating = Icons.filter_none;
    // Type de map affichée
    MapType _typeMap = MapType.normal;

    // Position initiale de la caméra sur la map
    final CameraPosition _initCameraPosition = CameraPosition(
        target: LatLng(43.623880, 3.898790),
        zoom: 18.0,
    );


    Set<Polyline> _polyline;


    @override
    Widget build(BuildContext context)
    {
        return Stack(
            children: <Widget>
            [
                GoogleMap(
                    polylines: _polyline,
                    mapType: _typeMap,
                    initialCameraPosition: _initCameraPosition,
                    onMapCreated: aPolyline,
                    // onMapCreated: (GoogleMapController controller)
                    // {
                    //     _controller.complete((controller));
                    // },
                ),
                // Espacement entre le bouton et le bord de l'écran
                Padding(
                    padding: EdgeInsets.all(16.0),
                    // Widget d'alignement
                    child: Align(
                        alignment: Alignment.bottomRight,
                        // Bouton de modification de la carte affichée
                        child: FloatingActionButton(
                            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            child: Icon(_iconFloating,),
                            onPressed: () { _iconFloatingButton(context); }
                        ),
                    ),
                ),
            ],
        );
    }


    /// 
    /// Evènement d'appui sur le bouton de la carte.
    /// Switche le type de carte affichée.
    /// 
    void _iconFloatingButton(BuildContext context)
    {
        if (mounted)
        {
            setState(()
            {
                // Si la carte affichée est de type normal, on affiche une vue satellite
                if (_iconFloating == Icons.filter_none) 
                {
                    _iconFloating = Icons.satellite;
                    _typeMap = MapType.hybrid;
                }
                // Sinon c'est la carte de type satellite qui esr affichée, on remet l mode normal.
                else
                {
                    _iconFloating = Icons.filter_none;
                    _typeMap = MapType.normal;
                }
            });
        }        
    }


    Future<void> ap() async
    {
        List<LatLng> latLngList = List();
        LatLng _one = LatLng(43.623880, 3.898790);
        LatLng _two = LatLng(43.623880, 3.91256);
        LatLng _three = LatLng(43.56325, 3.898790);
        LatLng _four = LatLng(43.53214, 3.872365);

        latLngList.add(_one);
        latLngList.add(_two);
        latLngList.add(_three);
        latLngList.add(_four);

        Polyline po =  Polyline(
                    polylineId: PolylineId('test'),
                    visible: true,
                    points: latLngList,
                    color: Colors.blue,
                    width: 2,

                );

        aPolyline(await _controller.future, poly: po);        
    }


    ///
    /// Ajout d'une polyline
    /// 
    void aPolyline(GoogleMapController mapController, {Polyline poly})
    {
        Log.printLogDebug("APOLYLINE()");

        setState(() 
        {          
            _controller.complete((mapController));

            if (poly != null)
            {
                _polyline.add(poly);                    
            }
        });        
    }
}

In this class, when i clic on floating button, he change the type of map. That works.

class ViewMap extends StatefulWidget
{
    @override
    _ViewMap createState() => _ViewMap();
}

class _ViewMap extends State<ViewMap>
{    
    GoogleMapsW _googleMapsW = GoogleMapsW(); 

    @override
    Widget build(BuildContext context) 
    {
        return Scaffold(
                body:             
                Stack(
                    children: <Widget>[
                        // Carte google personnalisée.
                        _googleMapsW,

                        Center(
                            child: IconButton(
                                 icon: Icon(Icons.flag),
                                 onPressed: () { _googleMapsW.addPolyline(); },
                            ),
                        ),
                     ],
                  ),
               ),
            };
}

The "Center" with IconButton is just for test the addPolilyne. In my true solution, this button don't exist.

Sorry for my bad expressions, but I'm French and my English is so bad.

How your add Polyline on googleMapFlutter when map is already build?

2 Answers2