Как сохранить и получить состояние?

Я думаю, что вы правильно подходите к примеру, но в реальном проекте я рекомендую хранить это состояние внутри ViewModel.

• Вы можете использовать Block, Flutter_RiverPod или любую другую архитектуру для управления состоянием представления (например, размером вашего круга) >> и Widget будет прослушивать ваши изменения ViewModel, чтобы отобразить правильное представление.
• Если вам не нужно хранить размер круга, просто хотите изменить размер. Вы можете добавить анимацию в CirCle Widget, чтобы разрешить пользователю масштабирование или масштабирование вручную.

Я бы предложил это следующим образом:

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

Конечно, класс круга может обрабатывать изменение размера сам по себе, но я думаю, что в этом сценарии, если вы создаете своего рода пользовательский холст, информация о том, где и какие круги существуют, принадлежит холсту. Итак, у нас есть разные переменные, которые (могут) изменяться во время выполнения: Где существует круг? Какого размера? В каком я режиме? (добавление новых кругов или изменение их размера). Я бы сохранил всю эту информацию только в виджете с отслеживанием состояния. (без использования BLoC или чего-то еще...) При создании нового круга (в приведенном выше коде я использовал блоки) я просто передал бы обработчик объекту круга. Объект будет вызывать обработчик при выборе, и обработчик реализован в родительском виджете с отслеживанием состояния.

Что касается постоянства: я бы реализовал процедуру постоянного хранения состояния кругов вне компонента холста. Должна быть возможность создать компонент холста с заданными кругами. Возможно, родитель компонента холста, в моем примере MyPainterComponent, просто обертывает этот класс + функциональность, как хранить информацию о состоянии в локальной базе данных/Firebase и т. д. Опять же, я бы просто передал обработчик «хранения» в MyPainterComponent. Использование BLoC или любой другой библиотеки управления состоянием, ИМХО, также абсолютно необязательно в этом случае.

Возможно, использование BLoC полезно при создании действительно сложного приложения, когда для обработки данных из серверной части требуется действительно сложная «бизнес-логика». Как сложное новостное приложение, которое получает push-уведомления. Но, на мой взгляд, даже для простого функционала чата BLoC и другие «решения» по управлению состоянием совершенно не нужны.

Возможно, вам понравится это видео: После 4 ЛЕТ работы инструктором по Flutter, вот мои 5 советов для новичков [на 2022 год]. Его совет № 2: «Перестаньте изучать, какой лучший пакет «Управление государством»».