Flutter在没有显示在屏幕上的情况下拍摄小部件的屏幕截图

Question

我需要截图小部件，但不想在屏幕上显示小部件。

我现在正在做这个

我的小工具

showSc ? Screenshot(
controller: screenshotController,
child: Container(
color: Color(0xffE5E7E9),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Payment Reminder', style: TextStyle(
fontFamily: 'PoppinsRegular',
fontSize: 19,
color: Color(0xff8f9ba8))),
Text(Ggive.toString(), style: TextStyle(
fontFamily: 'PoppinsBold',
fontSize: 17,
color: Colors.red)),
SizedBox(height: 20,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
Text(widget.data['selererName'].toString(), style: TextStyle(
fontFamily: 'PoppinsBold',
fontSize: 15,
color: Color(0xff8f9ba8))),
],
),
Image.asset('images/splash-logo.png', width: 120,)
],
)
],
),
),
),
) : Container(),

捕获

GestureDetector(
onTap: () async {
print('click');
_imageFile = null;
screenshotController
.capture()
.then((Uint8List image) async {
_imageFile = image;
print(base64Encode(_imageFile));
FlutterShareMe()
.shareToWhatsApp(base64Image: 'data:image/jpeg;base64,${base64Encode(_imageFile)}', msg: 'Apna ${widget.data['selererName']} ko ${Ggive.toString()} Rupees dene hein');
}).catchError((onError) {
print(onError);
});

},
child: Column(
children: [
Icon(Icons.messenger_outline_outlined),
Text(
'Whatsapp',
style: TextStyle(fontFamily: 'PoppinsRegular'),
)
],
),
),

但当我截图并发送到WhatsApp时，它没有发送，如果使showSc布尔为真，那么它工作正常，但我不想显示这个小部件，任何人都可以为此提供解决方案，我被困在这里-_-

Answer 1

如果你想截屏不在屏幕上的小部件，试试这个davinci:

import 'package:davinci/davinci.dart';
import 'package:davinci/core/davinci_capture.dart';
import 'package:flutter/material.dart';
class App extends StatefulWidget {
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
///1.create a globalkey variable
GlobalKey imageKey;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
///2. wrap the desired widget with Davinci widget
Davinci(
builder: (key) {
///3. set the widget key to the globalkey
imageKey = key;
return Container(
height: 150,
width: double.infinity,
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 50,
width: 50,
color: Colors.red,
),
],
),
),
);
},
),
Padding(
padding: const EdgeInsets.all(38.0),
child: TextButton(
onPressed: () async {
///4. pass the globalKey varible to DavinciCapture.click.
await DavinciCapture.click(imageKey);
},
child: Text('capture',
style: TextStyle(
color: Colors.white,
)),
),
),
TextButton(
onPressed: () async {
///If the widget was not in the widget tree
///pass the widget that has to be converted into image.
await DavinciCapture.offStage(PreviewWidget());
},
child: Text('Capture'),
)
],
),
),
);
}
}
/// This widget is not mounted when the App is mounted.
class PreviewWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}

Answer 2

构建屏幕的方式并没有使小部件不可见，而是不存在。

由于您的布尔值，控制器没有设置，并且您的页面只包含一个空的Container。这就是为什么屏幕截图目前无法保存任何内容的原因。

在这种情况下，你可以显示你的小部件，但在它上面创建一个覆盖层，使它不可见但存在。最好的小部件是Stack。

堆栈是一个后进先出法，所以最后一个子将在顶部。

尝试使用Stack:包装Screenshot小部件

Stack(
children: [
Screenshot(
controller: screenshotController,
...
),
Positioned.fill(
child: Container(color: Colors.white)),
],
)

它缺少一点上下文来提供正确的小部件，以便在大小/限制方面放在首位，但可以随意调整Positioned。

Answer 3

为什么不使用重新绘制边界。

创建全局密钥。

GlobalKey frontScreenSnap = new GlobalKey();


RepaintBoundary(
key: ScreenSnap,
child: Container(
color: Color(0xffE5E7E9),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Payment Reminder', style: TextStyle(
fontFamily: 'PoppinsRegular',
fontSize: 19,
color: Color(0xff8f9ba8))),
Text(Ggive.toString(), style: TextStyle(
fontFamily: 'PoppinsBold',
fontSize: 17,
color: Colors.red)),
SizedBox(height: 20,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
Text(widget.data['selererName'].toString(), style: TextStyle(
fontFamily: 'PoppinsBold',
fontSize: 15,
color: Color(0xff8f9ba8))),
],
),
Image.asset('images/splash-logo.png', width: 120,)
],
)
],
),
), 
),


Future<ByteData>  screenshot()async{
RenderRepaintBoundary boundary =
key.currentContext!.findRenderObject() as RenderRepaintBoundary;
var image = await boundary.toImage(pixelRatio: 2);
ByteData byteData = (await image.toByteData(format: ImageByteFormat.png))!;

return byteData;
}

您可以在任何地方使用此功能，即您可以保存字节数据，也可以将其分配为Image。内部

var data=screen();
Image(data.buffer.asUint8List());