How to store and retrieve state? – Flutter

I would suggest it as follows:

class MyPainterComponent extends StatefulWidget {
  const MyPainterComponent({super.key, this.boxes});

  final List<DrawBox>? boxes;

  @override
  State<MyPainterComponent> createState() => _MyPainterComponentState();
}

// _MyPainterComponentState contains all the drawn boxes and which working mode is currently selected.
// It also handles selecting the mode, adding new boxes and resizing them.
class _MyPainterComponentState extends State<MyPainterComponent> {
  final TransformationController _tController =
      TransformationController();

  //list of all drawn boxes
  List<DrawBox> _boxes = [];
  int _selectedMode = 0;

  //select current working mode
  _selectMode(int index){

    setState((){
      _selectedMode = index;
    });

    //delete all boxes on reset
    if(_selectedMode == 3 ){
      _boxes = [];
    }
  }


  @override

  //if component was constructed with boxes args: init '_boxes' with it
  //otherwise: '_boxes' is empty
  void initState() {
    super.initState();
    if(widget.boxes != null){
      _boxes = widget.boxes!;
    }
  }


  //increase size or decrease size depending on selected mode
  void resizeBox(DrawBox box){
    double scale = 1;
    if(_selectedMode == 1) {
      scale *= 1.2;
    } else if (_selectedMode == 2) {
      scale /= 1.2;
    }

    int selectedBoxInd = _boxes.indexWhere((element) => element == box);

    setState((){
      _boxes[selectedBoxInd] = DrawBox(size: box.size * scale, color: box.color, posX: box.posX, posY: box.posY, handleSelect: resizeBox,);
    });    
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(

      //wrap InteractiveViewer into a GestureDetector
      body: GestureDetector(
          onTapUp: (details) {
            //adding a new box
            if(_selectedMode == 0) {
              //Tapping a spot S in GestureDetector gives you a position A.
              //If every transformation of the InteractiveViewer would be undone, the spot S will change its 
              //position to B in the GestureDetector. 
              //This maps position A --> B.
              Offset pos = _tController.toScene(details.localPosition);

              setState(() {
                _boxes.add(DrawBox(
                    size: 20, color: Colors.yellow, posX: pos.dx, posY: pos.dy, handleSelect: resizeBox));
              });

            }

          },
          child: InteractiveViewer(
              minScale: 0.5,
              maxScale: 2.5,
              transformationController: _tController,
              //the "canvas" for adding new objects
              child: Container(
                  width: 600,
                  height: 600,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                    image: AssetImage('resources/dutch_parliament.jpg'),
                    fit: BoxFit.cover,
                  )),
                  child: Stack(children: _boxes)))),
      //selecting the mode in the bottom navigation bar
      bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.mode_edit), label: 'Add Box'),         
            BottomNavigationBarItem(
                icon: Icon(Icons.add_circle_outline), label: 'Size up'),
            BottomNavigationBarItem(
                icon: Icon(Icons.remove_circle_outline), label: 'Size down'),
            BottomNavigationBarItem(
                icon: Icon(Icons.delete_outlined), label: 'Reset'),
          ],
          backgroundColor: Colors.white,
          currentIndex: _selectedMode,
          selectedItemColor: Colors.amber[800],
          onTap: _selectMode,
          type: BottomNavigationBarType.fixed),
    );
  }

}


//drawing a box around the center ('posX', 'posY'), length of edge is 'size'
class DrawBox extends StatelessWidget {
  const DrawBox(
      {required this.size,
      required this.color,
      required this.posX,
      required this.posY,
      required this.handleSelect});

  final double size;
  final Color color;
  final double posX;
  final double posY;

  final Function(DrawBox) handleSelect;

  @override
  Widget build(BuildContext context) {
    
    //position boxes with margin property
    //
    //prevent negative margin, which would throw an exeption
    double marginL = (posX - size/2) > 0 ? posX - size/2 : 0;
    double marginT = (posY - size/2) > 0 ? posY - size/2 : 0;

    return GestureDetector(
      onTap: () {
        handleSelect(this);
      },
      child: Container(
          margin: EdgeInsets.only(
            left: marginL, 
            top: marginT),
          width: size,
          height: size,
          color: color,
          //problem: transformation won't transform the gesture detector widget, 
          // this would stay always in default position
          //transform:
          //  Matrix4.translationValues(posX - size / 2, posY - size / 2, 0)
      )
    );
  }
}

Of course a circle class can handle resizing on its own, but I think in this scenario if you’re building a kind of a custom canvas, the information where and which kind of circles exists belong to the canvas. So we have different variables that (can) change at runtime: Where does a circle exist? Which size? In which mode I am? (adding new circles vs. resizing them). I would store all these info just in a stateful widget. (without using BLoC or what’soever…) When creating a new circle (in the code above I’ve used boxes) I would just pass a handler to the circle object. The object will invoke the handler on being selected and the handler is implemented in the parent stateful widget.

Regarding persistency: I would implement the procedure for storing the circles’ state persistently outside the canvas component. It should be possible to create a canvas component with given circles. Maybe the parent of the canvas component, in my example MyPainterComponent, just wraps this class + functionality how to store the state info to a local database/Firebase etc. Again, I would just pass an "on storing" handler to MyPainterComponent. Using BLoC or any other state management lib is IMHO also absolutely dispensable in this case.

Maybe using BLoC is helpful when building a really complex app, when there’s is really complex "business logic" needed for processing data from the backend. Like a complex news app that receives push notifications. But in my opinion, even for just a simple chat functionality BLoC and other state management "solutions" are absolutely dispensable.

Maybe you like to watch this vid: After 4 YEARS as a Flutter instructor, here are my 5 tips for newcomers [for 2022]. His tip #2: "stop learning what the best "State Management" package is."