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 bool 为真，则它工作正常，但我不想显示此小部件，任何人都可以为此提供解决方案，我被困在这里-_-

Answer 1

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

由于您的布尔值，控制器未设置，您的页面仅包含一个空的 Container。这就是屏幕截图此时无法保存任何内容的原因。

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

堆栈是一个 LIFO，所以最后一个孩子将在顶部。

尝试用 Screenshot 包装您的 Stack 小部件：

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

缺少一些上下文来提供正确的小部件以在大小/限制方面放在首位，但您可以根据需要随意调整 Positioned。

Answer 2

为什么不使用重绘边界。

创建全局密钥。

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

您可以在任何地方使用此功能，即您可以保存字节数据，也可以为其分配图像。里面

var data=screen();

Image(data.buffer.asUint8List());

Answer 3

如果你想截图不在屏幕上的小部件，试试这个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();
  }
}

Flutter 截取小部件的屏幕截图而不显示在屏幕上

3 个答案: