I have an image with a draggable text widget over it. How can I save this image with the text to the gallery?

Question

I'm trying to make a basic image editing feature in Flutter. I figured out the way to drag the text widget over the image after investing some time. But I'm completely unaware of how to save the image with the text placed over it. Can someone suggest the way to save this to device?

Below is the code to drag the text across the image. How can I save the image with the text on to the gallery? (After a button click may be).

import "package:flutter/material.dart";

class TextOverImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Text Over Image Image Example'),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Save the file in gallery
          },
          child: Icon(Icons.download_sharp)),
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          child: Stack(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.blue,
                    image: DecorationImage(
                        image: new NetworkImage(
                            "https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
                        fit: BoxFit.fill)),
              ),
              HomePage()
            ],
          ),
        ),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Offset offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Positioned(
        left: offset.dx,
        top: offset.dy,
        child: GestureDetector(
            onPanUpdate: (details) {
              setState(() {
                offset = Offset(
                    offset.dx + details.delta.dx, offset.dy + details.delta.dy);
              });
            },
            child: SizedBox(
              width: 300,
              height: 300,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Center(
                  child: Text("HELLO WORLD",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 28.0,
                          color: Colors.red)),
                ),
              ),
            )),
      ),
    );
  }
}

Can anyone suggest me a way to accomplish this? I'm wrapping my head around for a couple of hours now.

Answer 1

You just need wrap stack with RepaintBoundary() and create a global key for repaintBoundary() then create a method save for saving the image.
//I modified  your TextOverImage image class paste the code as it to your dart file as after saving you will find saved image at the printed file path.
//import all the required pakages (i.e path_provider)




class TextOverImage extends StatefulWidget {
      @override
      _TextOverImageState createState() => _TextOverImageState();
    }
    
    class _TextOverImageState extends State<TextOverImage> {
      final global_key = new GlobalKey();
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text('Text Over Image Image Example'),
          ),
          floatingActionButton: FloatingActionButton(
              onPressed: () {
                save();
              },
              child: Icon(Icons.download_sharp)),
          body: Center(
            child: Container(
              height: 300,
              width: 300,
              child: RepaintBoundary(
                key: global_key,
                child: Stack(
                  children: <Widget>[
                    Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: Colors.blue,
                          image: DecorationImage(
                              image: new NetworkImage(
                                  "https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
                              fit: BoxFit.fill)),
                    ),
                    HomePage()
                  ],
                ),
              ),
            ),
          ),
        );
      }
    
      save() async {
        RenderRepaintBoundary boundary =
            global_key.currentContext.findRenderObject();
        ui.Image image = await boundary.toImage();
        ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
        Uint8List pngBytes = byteData.buffer.asUint8List();
        final directory = await getExternalStorageDirectory();
        print("my directory !!!!!!!!!!!! ${directory}");
        final myImagePath = '${directory.path}/MyImages';
        await new Directory(myImagePath).create();
        new File("$myImagePath/image_2.jpg").writeAsBytes(pngBytes);
        print("image saved Scuesfully");
      }
    }