Flutter屏幕截图插件widget_screenshot的使用

Flutter屏幕截图插件widget_screenshot的使用

widget_screenshot 是一个用于Flutter应用中截取Widget图像的插件，支持长截图（如ListView）。以下是该插件的基本功能和支持特性：

支持的功能

  • 背景颜色设置 (backgroundColor)
  • 图片格式选择（png, jpeg）
  • 图片质量调整（0~100）
  • 额外图片添加（如：header, footer 或 watermark）

使用步骤

添加依赖

首先，在您的pubspec.yaml文件中添加widget_screenshot依赖：

dependencies:
  widget_screenshot: x.y.z

请确保将x.y.z替换为最新版本号。

示例代码

下面是一个完整的示例demo，展示了如何使用WidgetShot来截取一个包含30个随机颜色容器的ListView，并生成截图。

主界面代码

import 'package:flutter/material.dart';
import 'package:widget_screenshot/widget_shot.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _shotKey = GlobalKey();
  final ScrollController _scrollController = ScrollController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget Screenshot Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: WidgetShot(
              key: _shotKey,
              child: ListView.separated(
                controller: _scrollController,
                itemBuilder: (context, index) {
                  return Container(
                    color: Color.fromARGB(
                      Random().nextInt(255),
                      Random().nextInt(255),
                      Random().nextInt(255),
                      Random().nextInt(255),
                    ),
                    height: 160,
                    child: Center(
                      child: Text(
                        "测试文案 ${index}",
                        style: TextStyle(fontSize: 32),
                      ),
                    ),
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider(height: 1, color: Colors.grey);
                },
                itemCount: 30,
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              var repaintBoundary =
                  _shotKey.currentContext!.findRenderObject() as WidgetShotRenderRepaintBoundary;
              var resultImage = await repaintBoundary.screenshot(scrollController: _scrollController);
              // 这里可以处理截图结果，比如显示或保存图片
            },
            child: Text('截图'),
          )
        ],
      ),
    );
  }
}

更多关于Flutter屏幕截图插件widget_screenshot的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕截图插件widget_screenshot的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用widget_screenshot插件进行屏幕截图的示例代码。widget_screenshot插件允许你捕获Flutter Widget的截图，并将其保存为图片文件或者作为UI的一部分进行显示。

首先，你需要在你的pubspec.yaml文件中添加widget_screenshot依赖：

dependencies:
  flutter:
    sdk: flutter
  widget_screenshot: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，是一个简单的示例代码，展示了如何使用widget_screenshot插件进行屏幕截图并保存到设备存储中：

import 'package:flutter/material.dart';
import 'package:widget_screenshot/widget_screenshot.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Screenshot Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey _screenshotKey = GlobalKey();
  File? _screenshotFile;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screenshot Example'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            key: _screenshotKey,
            child: Center(
              child: Text(
                'Hello, Flutter!',
                style: TextStyle(fontSize: 24),
              ),
            ),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black, width: 2),
            ),
            padding: EdgeInsets.all(20),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _capturePng,
            child: Text('Capture Screenshot'),
          ),
          if (_screenshotFile != null)
            Image.file(_screenshotFile!),
        ],
      ),
    );
  }

  Future<void> _capturePng() async {
    try {
      final ScreenshotController screenshotController = ScreenshotController();
      await screenshotController.captureFromWidget(
        context,
        _screenshotKey.currentContext!,
      );
      final Uint8List pngBytes = await screenshotController.screenshotToBytes(
        format: ImageByteFormat.png,
      );

      final Directory directory = await getApplicationDocumentsDirectory();
      final String filePath = '${directory.path}/screenshot.png';
      final File file = File(filePath);
      await file.writeAsBytes(pngBytes);

      setState(() {
        _screenshotFile = file;
      });

      print('Screenshot saved to $filePath');
    } catch (e) {
      print('Error capturing screenshot: $e');
    }
  }
}

在这个示例中：

  1. 我们定义了一个_MyHomePageState类，它包含一个GlobalKey _screenshotKey，用于标记我们希望截图的Widget。
  2. 我们创建了一个按钮，点击该按钮时会调用_capturePng方法。
  3. 在_capturePng方法中，我们使用ScreenshotController来捕获指定Widget的截图，并将其保存为PNG格式的文件到应用的文档目录中。
  4. 如果截图成功，我们将截图的文件路径保存在_screenshotFile变量中，并在UI中显示该截图。

请注意，由于截图操作涉及文件系统访问，因此你可能需要在AndroidManifest.xml和Info.plist中添加相应的权限声明，以便在Android和iOS平台上保存文件。

希望这个示例能够帮助你理解如何在Flutter应用中使用widget_screenshot插件进行屏幕截图。

回到顶部