как встраивать виджеты в изображения и сохранять их на устройстве

#flutter

#flutter

Вопрос:

У меня есть изображение с container изображением. Я хочу иметь возможность редактировать TextField содержимое контейнера и сохранять изображение в виде изображения на устройстве.

Моя текущая настройка — это stack когда изображение и контейнер накладываются друг на друга. Как я могу сохранить это как изображение?

Обратите внимание, что я не хочу сохранять весь экран, только изображение и все, что на нем.

 Future<File> createWave(BuildContext context, GlobalKey screen) async {
    RenderRepaintBoundary boundary = screen.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 getApplicationDocumentsDirectory()).path;
    File imgFile = File('$directory/screenshot.png');
    await imgFile.writeAsBytes(pngBytes);
    return imgFile;
  }
  

тупик

Ответ №1:

К счастью, поскольку flutter использует skia для рендеринга графики, мы можем делать скриншоты виджетов, и уже есть действительно хорошая статья, которая делает что-то подобное. По сути, вы оборачиваете свой виджет в RepaintBoundary и присваиваете ему ключ, а затем используете ключ для вызова RenderObject.Метод toImage. Вот еще один простой пример, как это сделать. Удивительно, насколько это просто: D