Flutter: Modify Hero child between two screens - flutter

Question

I have two screens, in the first screen i have an image, let's call original image, when i tap a button, i navigate to the second screen with a hero animation over the image. in the second screen i will cut or paint (draw lines) the original image and then i save this image with the RepaintBoundary Widget. My question is how i can modify the hero child (with original image) in the first screen, so that when i make the pop in the second screen, the Hero animation happens normally with the modified image in both screens.
class Screen1 extends StatefulWidget {
final Uint8List bytes;
const Screen1({Key? key, required this.bytes}) : super(key: key);
#override
State<Screen1> createState() => _Screen1State();
}
class _Screen1State extends State<Screen1> {
late final ValueNotifier<ImageProvider> _imageNotifier; /// With Image()
// late final ValueNotifier<Uint8List> _imageNotifier; /// With Image.memory()
#override
void initState() {
super.initState();
_imageNotifier = ValueNotifier(Image.memory(widget.bytes).image);
// _imageNotifier = ValueNotifier(widget.bytes);
}
#override
void dispose() {
_imageNotifier.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ValueListenableBuilder<ImageProvider>(
valueListenable: _imageNotifier,
builder: (_, image, __) {
return Hero(
tag: 'image',
child: Image(image: image),
);
},
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.draw),
onPressed: () => Navigator.of(context).push(
PageRouteBuilder(pageBuilder: (_, __, ___) => Screen2(imageNotifier: _imageNotifier))
),
),
);
}
}
class Screen2 extends StatefulWidget {
final ValueNotifier<ImageProvider> imageNotifier;
const Screen2({Key? key, required this.imageNotifier}) : super(key: key);
#override
State<Screen2> createState() => _Screen2State();
}
class _Screen2State extends State<Screen2> {
final _key = GlobalKey();
static const _duration = Duration(milliseconds: 100);
Future<void> _takeSnapshot() async {
final boundary = _key.currentContext!.findRenderObject() as RenderRepaintBoundary;
final image = await boundary.toImage(pixelRatio: 2.0);
image.toByteData(format: ui.ImageByteFormat.png).then((byteData) {
final imageProvider = Image.memory(byteData!.buffer.asUint8List()).image;
widget.imageNotifier.value = imageProvider;
/// Delay for update first screen
Future.delayed(_duration, () => Navigator.of(context).pop());
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: RepaintBoundary(
key: _key,
child: Stack(
children: [
/// ORIGINAL IMAGE
ValueListenableBuilder<ImageProvider>(
valueListenable: widget.imageNotifier,
builder: (_, image, __) {
return Hero(
tag: 'image',
child: Image(image: image)
);
}
),
/// LINES WITH CUSTOM PAINTER
],
),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.camera),
onPressed: _takeSnapshot,
),
);
}
}
The code above shows a minimal example of what i want to achieve, I dont put the code to draw the lines because it is significantly long, but the point is that i take a snapshot of the stack widget and update the notifier.
I don't know if to paint the image it is better to use an Image.memory (Uint8List) or Image (ImageProvider), this will be the type of the ValueNotifier.
The points above are some ideas that i have to achive the target, but I would like to know if there is a better way that you know.
Thanks!