I am using the RenderRepaintBoundary/GlobalKey technique to convert a Widget into an image file. The problem is that any child Image Widgets in the Widget disappear when I convert the Widget to an image file, but everything else on the screen, besides the child Image Widgets, makes it into the image file.
Here's my code. It's basically a screen with a button and an image on it. If you click the button then an image snapshot is taken of the Widget and then the app displays this snapshot and nothing else. As a result, the child Image disappears. There is a bit more explanation below this code:
import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title}) : super(key: key);
final String? title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Uint8List? ssBytes;
bool isShowSs = false;
final GlobalKey genKey = GlobalKey();
Future<void> takePicture() async {
RenderRepaintBoundary boundary = genKey.currentContext!.findRenderObject()! as RenderRepaintBoundary;
ui.Image image = await boundary.toImage();
ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
ssBytes = byteData!.buffer.asUint8List();
setState(() {
isShowSs = true;
});
}
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
if(isShowSs) {
return Image.memory(ssBytes!);
}
else {
return RepaintBoundary(
key: genKey,
child: Scaffold(
appBar: AppBar(
title: Text(widget.title!),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
ElevatedButton(
onPressed: () async {
await takePicture();
},
child: Text(
"Take Picture",
)),
Image.asset('assets/images/img.png'),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}
}
To clarify, this is the element that disappears from the image capture:
Image.asset('assets/images/img.png')
How can I make it so that this sub-image appears in the image capture?