Flutter 在不同页面上同一小部件的两个实例之间同步 state

Question

I have a question about my use case: assume we are currently on screen A which shows an instance of my chart-widget (amongst other things). I want to give the user the opportunity to show that chart on the full app-screen by allowing to tap on a "full-screen" button at the top-right. On full screen button click, I push a new MaterialPageRoute and show the same widget instance of the chart on the whole screen (screen B).

However I miss something important, which is that the fullscreen widget should stay in sync with the original widget. Ie if the user makes any modification in fullscreen, after closing the fullscreen mode, the original chart should be in the same state as the fullscreen chart. I currently don't know how to achieve this. I tried by using the same GlobalKey for both, but without luck. Any hints?

Screen A:

Screen B:

Some code:

My Fullscreenable widget which enables to show any Widget on a on the full scaffold body within a new page:

class Fullscreenable extends StatelessWidget {
  final String name;
  final Widget child;

  const Fullscreenable({
    Key? key,
    required this.child,
    this.name = "",
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        Positioned(
          top: -12,
          right: -12,
          child: IconButton(
            // visualDensity: VisualDensity.compact,
            padding: EdgeInsets.zero,
            icon: const Icon(Icons.fullscreen),
            onPressed: () {
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(
                  builder: (BuildContext context) => FullScreenView(
                      title: name,
                      child: child,
                    ),
                  // fullscreenDialog: true,
                ),
              );
            },
          ),
        )
      ],
    );
  }
}

Screen A:

...
Column(
  children: [
    Fullscreenable(
      name: "This is the title",
      child: MyChart()
    ),
    ...
  ],
)
...

Screen B ( FullscreenView ):

class FullScreenView extends StatelessWidget {
  final String title;
  final Widget child;

  const FullScreenView({Key? key, required this.child, this.title = ""})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        toolbarHeight: 48,
      ),
      body: child,
    );
  }
}

Answer 1

As a native solution, you can consider ValueNotifier and ValueListenableBuilder . Or implement some state manager.