We want to have an award pinned on photos. This simple stack should do it.
Zoom and Pan functionality was asked for, which is why I have an InteractiveViewer with the IgnorePointer for the overlay.
class _OverlayImagesScreenState extends State<OverlayImagesScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(centerTitle: true, title: Text('Image Overlay')),
body: Column(
children: [
Stack(
children: <Widget>[
InteractiveViewer(
boundaryMargin: EdgeInsets.all(20),
minScale: 0.1, maxScale: 10.0,
// The actual image will come from an upload in the future
child: Image.asset('assets/figures/Teacher02.jpg')),
Positioned(
bottom: 10, left: 40,
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
child: IgnorePointer(
ignoring: true,
child: Image.asset('assets/demo_png/teacher_of_the_year.png'),
),
),
),
],
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
// HOW DO I SHARE / SAVE THE IMAGE IN A ZOOMED AND PANNED STATE
// WITH THE OVERLAY ON TOP?
},
child: Text('Share'),
),
],
),
);
}
}
However, now the users want to export this, and share it with their friends via SMS or Social media.
How do I share / save the composite image in a zoomed-in and panned state with the overlay on top?
