Adding array of Markers to Flutter_Map only show after moving the map

Question

Using Flutter_Map here. I am loading the markers from a local json file in my assets directory. The map draws, the markers load into my marker array, but not until after I move the map on the screen do the markers show. I'm a bit new to flutter here, so I must be doing something wrong in the marker loading part?

I have tried a few things. Currently this is my flutter map and marker array code:

class _MapWidget extends StatelessWidget {
//const so flutter doesn't rebuild it each time...

  const _MapWidget();
  // final SiteID sid = null;
  // final Sites site = null;

  @override
  Widget build(BuildContext context) {
    print("add map");
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(40.0, -120.0),
        zoom: 8.0,
      ),
      layers: [
        TileLayerOptions(
          urlTemplate:
              'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
          subdomains: ['a', 'b', 'c'],
          tileProvider: CachedNetworkTileProvider(),
        ),
        new MarkerLayerOptions(markers: _MapDataState().marker),
      ],
    );
  }
}

Loading marker array on _MapDataState() constructor seems to be the only place i can get the array to share into my _MapWidget:

 class _MapDataState extends State<MapData> {
      List<SitesList> sl = [];
      List<SnoTelSite> sts = [];
      var marker = <Marker>[];

      _MapDataState(){
        print("map data state");
        loadSites().then((sitesdata) {
          print('Loaded Sites Asset JSON');
          //clone sitesdata into sts array
          sts..addAll(sitesdata);
          sts.forEach((s) {
            marker.add(
              Marker(
                point: new LatLng(double.parse(s.lat),double.parse(s.lng)),
                builder: (ctx) => _MarkerPopUp(sitename: s.name, siteelevation: s.elevation, siteid: s.siteID,),
              ),
            );
          });
        });
      }

      // @override
      // initState() {
      //   print("INIT STATE");
      //   super.initState();
      // }

      //local load assets ... constants hold path snotelsitesjson
      Future<String> _loadSiteAssets() async {
        return await rootBundle.loadString(snotelsitesjson);
      }

      Future loadSites() async {
        String jsonString = await _loadSiteAssets();
        final jsonResponse = json.decode(jsonString);
        SitesList sitesList = new SitesList.fromJson(jsonResponse);
        return sitesList.sites;
      }

    //main build and screen layout
      @override
      Widget build(BuildContext context) {
        print("BUILD LAYOUT");
        return MaterialApp(
          theme: ThemeData(
            primarySwatch: Colors.cyan,
          ),
          home: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.white,
                leading: Icon(Icons.ac_unit),
                title: Text("SnoTel Map"),
                actions: <Widget>[
                  IconButton(
                    icon: Icon(Icons.favorite),
                    onPressed: () {
                      debugPrint("Favorites");
                    },
                  ),
                  IconButton(
                    icon: Icon(Icons.feedback),
                    onPressed: () {
                      debugPrint("Message sent");
                    },
                  ),
                ],
              ),
              body: _MapWidget()),
        );
      }
    }

Update! After the setState() help from @Ademir below, this is working to show my markers on load:

Update setState():

setState(() {
        marker = marker;
      });

Change in _MapWidget:

    const _MapWidget({this.marker});
    final List<Marker> marker;

...

    body: _MapWidget(marker: marker)),

Answer 1

First, change this:

    _MapDataState(){
        loadSites().then((sitesdata) {
          print('Loaded Sites Asset JSON');
          //clone sitesdata into sts array
          sts..addAll(sitesdata);
          sts.forEach((s) {
            marker.add(
              Marker(
                point: new LatLng(double.parse(s.lat),double.parse(s.lng)),
                builder: (ctx) => _MarkerPopUp(sitename: s.name, siteelevation: s.elevation, siteid: s.siteID,),
              ),
            );
          });
        });
    }

from the constructor to the initState():

@override
initState() {
    print("INIT STATE");
    super.initState();
    loadSites().then((sitesdata) {
          print('Loaded Sites Asset JSON');
          //clone sitesdata into sts array
          sts..addAll(sitesdata);
          sts.forEach((s) {
            marker.add(
              Marker(
                point: new LatLng(double.parse(s.lat),double.parse(s.lng)),
                builder: (ctx) => _MarkerPopUp(sitename: s.name, siteelevation: s.elevation, siteid: s.siteID,),
              ),
            );
          });
        });
}

After that, add a setState((){}); here:

          sts.forEach((s) {
            marker.add(
              Marker(
                point: new LatLng(double.parse(s.lat),double.parse(s.lng)),
                builder: (ctx) => _MarkerPopUp(sitename: s.name, siteelevation: s.elevation, siteid: s.siteID,),
              ),
            );
          });
          setState((){});