image - 我有一个带有可拖动文本小部件的图像。如何将此图像与文本一起保存到图库？

Question

我正在尝试在 Flutter 中制作基本的图像编辑功能。在投入了一些时间之后，我想出了将文本小部件拖到图像上的方法。但我完全不知道如何保存带有文本的图像。有人可以建议将其保存到设备的方法吗？

下面是在图像上拖动文本的代码。如何将带有文本的图像保存到图库中？（点击按钮后可能）。

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

谁能建议我一种方法来实现这一点？我现在正在绕着头转几个小时。

标签： imageflutterdartdraggable

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");
      }
    }