Flutter: Share composite JPG with PNG overlay

34 Views Asked by At

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'),
          ),
        ],
      ),
    );
  }
}

enter image description here

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?

0

There are 0 best solutions below