Flutter: setState() called in constructor

Question

I am novice in Flutter, and ran upon a problem trying to show a map and implement some tilelayers.

The app has a Drawer implemtation where I want to enable/disable and clear the tile cache.

I have fetched some examples where this was working well, so I know that the tiling works great, but here i ran upon a problem where I want to call member functions of the MyWorldMap stateful widget from the drawer widget, and to my spare knowledge I now are plagued by the setState() called in constructor error message.

Do you have any suggestions to help, or guide me on the correct path ?

Note !! Remember to add your own MAP API KEY according to: https://codelabs.developers.google.com/codelabs/google-maps-in-flutter?hl=en&continue=https%3A%2F%2Fcodelabs.developers.google.com%2F#3

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:http/http.dart' as http;


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget{
  const MyApp({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:"My App test",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(title: "My World Map")
    );
  }
}

class HomePage extends StatefulWidget{

  final String title;

  HomePage({Key? key, required this.title}):super(key: key);

  @override
  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage>{
  @override
  void initState(){
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: MainDrawer(),
      body: MyWorldMap(),
    );

  }


}

class MainDrawer extends StatefulWidget{

  @override
  State<StatefulWidget> createState() => MainDrawerState();
}

class MainDrawerState extends State<MainDrawer>{

  @override
  Widget build(BuildContext context) {

    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          const DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Text("My World Map"),
          ),
          ListTile(
            title: const Text ("Add tile overlay"),
            onTap: () => addTileOverlay(),
          ),
          ListTile(
              title: const Text ("Clear tile overlay cache"),
              onTap: () => clearTileCache(),
          ),
          ListTile(
              title: const Text ("Remove tile overlay"),
              onTap: () => removeTileOverlay(),
          ),

        ],
      ),
    );

  }

  void addTileOverlay(){
    print("Attempting to add tile overlay");
    MyWorldMap().addTileOverlay();
  }

  void clearTileCache(){
    print("Attempting clear tile cache");
    MyWorldMap().clearTileCache();
  }

  void removeTileOverlay(){
    print("Attempting removing tile overlay");
    MyWorldMap().removeTileOverlay();
  }

}

class MyWorldMap extends StatefulWidget{
  const MyWorldMap({Key? key}) : super(key: key);

  addTileOverlay() => createState()._addTileOverlay();
  removeTileOverlay() => createState()._removeTileOverlay();
  clearTileCache() => createState()._clearTileCache();

  @override
  _MyWorldMapState createState() => _MyWorldMapState();
}

class _MyWorldMapState extends State<MyWorldMap>
{
  TileOverlay? _tileOverlay;
  late GoogleMapController _mapController;
  final LatLng _initialCameraPosition = const LatLng(61.9026,6.7003); //Change with your location

  //You need to change maps API key in AndroidManifest.xml

  @override
  void initState(){
    super.initState();
  }

  Future<void> _onMapCreated(GoogleMapController controller) async {
    _mapController = controller;
    setState(() {
      //Do stuff ?
    });
  }

  @override
  Widget build(BuildContext context) {
    Set<TileOverlay> overlays = <TileOverlay>{
      if(_tileOverlay != null) _tileOverlay!,
    };

    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: _initialCameraPosition,
        zoom:15,
      ),
      myLocationEnabled: false,
      tileOverlays: overlays,
    );

  }

  void _addTileOverlay()
  {
    final TileOverlay tileOverlay = TileOverlay(
      tileOverlayId: TileOverlayId("My World Map Overlay"),
      tileProvider: MyWorldMapTileProvider(),
    );
    setState((){   //The code fails here when pushing the 'Add tile overlay button' !!
      _tileOverlay = tileOverlay;
    });
  }

  void _clearTileCache()
  {
    if(_tileOverlay != null){
      _mapController.clearTileCache(_tileOverlay!.tileOverlayId);
    }
  }

  void _removeTileOverlay()
  {
    setState(() {
      _tileOverlay = null;
    });
  }

}

class MyWorldMapTileProvider implements TileProvider {

  @override
  Future<Tile> getTile(int x, int y, int? zoom) async {

    String path = 'https://maptiles1.finncdn.no/tileService/1.0.1/norortho/$zoom/$x/$y.png';

    http.Response response = await http.get(
      Uri.parse(path)
    );

    return Tile(x,y,response.bodyBytes);
  }

}

Answer 1

Not that I am a real professional with flutter, but I think the problem might reside in here:

addTileOverlay() => createState()._addTileOverlay();    
removeTileOverlay() => createState()._removeTileOverlay();
clearTileCache() => createState()._clearTileCache();

You're creating a new state each time you invoke one of those methods in MyWorldMap widget, and I don't think that's the correct behaviour.

If you want to edit a Widget state from another Widget, you should try using keys: I think any stateful Widget can take a key argument in the constructor, that can be used in turn to change its state from other widgets. I'll try writing a simple example.

class Parent extends StatelessWidget {
final keyA = GlobalKey();
final keyB = GlobalKey();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(children: [
      ChildA(keyA),
      ChildB(keyB, keyA),
    ]),
  );
  }
}

class ChildA extends StatefulWidget {
 const ChildA(GlobalKey key) : super(key: key);

 @override
 State<StatefulWidget> createState() => ChildAState();
}

class ChildAState extends State<ChildA> {
 int counter = 0;
 @override
 Widget build(BuildContext context) {
  return Text("Child A count: $counter");
 }

 void increaseCounter(){
   setState(() {
     counter++;
   });
 }
}

class ChildB extends StatefulWidget {
 final GlobalKey childAKey;
 const ChildB(GlobalKey key, this.childAKey) : super(key: key);

 @override
 State<StatefulWidget> createState() => ChildBState();
}

class ChildBState extends State<ChildB> {
  @override
  Widget build(BuildContext context) {
  return TextButton(
    child: const Text("Press here"),
    onPressed: () {
      (widget.childAKey.currentState as ChildAState).increaseCounter();
    },
  );
 }
}