Flutter自动截图插件auto_screenshot的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter自动截图插件auto_screenshot的使用

auto_screenshot可以从您的Flutter应用中在移动平台(iOS和Android)上抓取屏幕截图。如果您希望截取的所有页面都可以通过无用户交互的深度链接访问,那么这是一个不错的选择。如果您的应用使用了SQLite数据库,还可以支持种子数据。

开始使用

您需要安装以下工具,并确保这些工具的二进制文件在您的PATH环境变量中可用:

  • xcode(仅限MacOS) - xcrun
  • 模拟器(随xcode一起安装)
  • Android SDK命令行工具 - emulator, adb
  • Java - java

安装方法:将auto_screenshot添加到您的pubspec.yaml文件的dev_dependencies中。 (如果您的IDE没有自动执行此操作,请运行flutter pub get。)

设置您的配置(见下文)。运行flutter run针对iOS模拟器生成必要的iOS应用文件,然后运行flutter build apk来构建Android APK。

首次在目标设备上运行auto_screenshot时,您需要进行监督。目标设备会请求权限以在您的应用中打开一个深度链接。您需要点击“确定”。

命令

  • dart run auto_screenshot: 启动模拟器引导,加载深度链接并收集屏幕截图。确保您已经为您的应用构建了一个ipa和appbundle。auto_screenshot将在标准输出文件夹中查找它们。
  • dart run auto_screenshot:list_devices: 列出所有可以用于auto_screenshot配置的有效设备名称。
  • dart run auto_screenshot:validate: 验证您的auto_screenshot配置而不运行任何测试。

配置

在您的pubspec.yaml文件中添加如下部分:

auto_screenshot:
  bundle_id: 
    android: com.example.myapp
    ios: com.example.myapp
  devices:
    - iPhone 8 Plus
    - iPhone 13 Pro Max
    - iPad Pro (12.9-inch) (2nd generation)
    - iPad Pro (12.9-inch) (5th generation)
    - Pixel_3a_API_33_arm64-v8a
    - Pixel_5_API_33
  base_url:
    android: http://flutterbooksample.com
    ios: customschema://flutterbooksample.com
  screenshot:
    - home
    - projects
    - projects/1
    - about
    - about/demo

如果您希望屏幕截图保存到<项目根目录>/auto_screenshot,这便是所需的全部配置。确保在运行该包之前先运行flutter build appbundle并针对iOS模拟器运行flutter run。这样可以确保所需文件存在。

所有配置字段:

  • bundle_id - (必填)您的应用的Bundle ID,如com.{domain}.{appname}androidiOS字段是必需的。这应与您的应用编译到的iOS和Android的Bundle ID匹配。
  • devices - (必填)一个设备名称数组。这些名称必须完全正确且不能有任何拼写错误。您可以运行dart run auto_screenshot:list_devices来获取有效的设备名称列表。这假设您已安装/创建要使用的模拟器,尽管在使用auto_screenshot时它们不应处于运行状态。
  • baseUrl - (必填)您的深度链接的基础URL。androidiOS字段是必需的。您的应用必须配置为深度链接;请参阅官方文档
  • screenshot - (必填)您想要截图的每个页面的相对URL。
  • output_folder - (可选)从项目根目录到所需屏幕截图输出文件夹的路径。默认为auto_screenshot
  • sqlite_folder - (可选)从项目根目录到包含您希望放置在每个模拟器的应用数据目录中的任何SQLite文件的文件夹的路径。例如,如果您使用sqflite,可以预置一个.db文件。

使用

没有公开API可供使用。设置好配置后,在命令行中运行导出的二进制文件。

支持

欢迎提交问题。请勿请求增加项目的范围。auto_screenshot旨在在MacOS上运行,并捕获iPhone和Android模拟器(而非物理设备)上的屏幕截图。它不会将结果放入框架中,不会添加文本或背景图像,也不会将资产上传到任何应用商店。

常见问题解答

问:为什么不使用Flutter的集成测试系统来进行自动化交互?

答:不幸的是,就屏幕截图而言,Flutter的integration_test包处于被忽视的状态。为了在两个平台上实现屏幕截图,您需要手动修改Flutter安装的Objective-C代码,即使它工作起来也存在问题:设备切边和凹槽无法捕捉,您只能在Android上每次测试只拍摄一张截图,并且某些您应该调用的命令在公共API中不可用给用户。

开发

构建自动生成的JSON映射:

dart run build_runner build

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

1 回复

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


当然,以下是如何在Flutter项目中使用auto_screenshot插件来进行自动截图的代码示例。auto_screenshot插件允许你轻松地在Flutter应用中捕获屏幕截图。

首先,你需要在你的pubspec.yaml文件中添加auto_screenshot依赖:

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

然后运行flutter pub get来获取依赖。

接下来,你可以在你的Flutter应用中使用AutoScreenshotController来捕获屏幕截图。以下是一个完整的示例:

import 'package:flutter/material.dart';
import 'package:auto_screenshot/auto_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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Auto Screenshot Example'),
        ),
        body: Center(
          child: ScreenshotExample(),
        ),
      ),
    );
  }
}

class ScreenshotExample extends StatefulWidget {
  @override
  _ScreenshotExampleState createState() => _ScreenshotExampleState();
}

class _ScreenshotExampleState extends State<ScreenshotExample> {
  late AutoScreenshotController _screenshotController;

  @override
  void initState() {
    super.initState();
    _screenshotController = AutoScreenshotController();
  }

  @override
  void dispose() {
    _screenshotController.dispose();
    super.dispose();
  }

  Future<void> _captureScreenshot() async {
    try {
      // 捕获截图
      File image = await _screenshotController.capture();

      // 获取应用文档目录
      Directory appDocDir = await getApplicationDocumentsDirectory();
      String imgPath = '${appDocDir.path}/${DateTime.now().millisecondsSinceEpoch}.png';

      // 保存截图到文档目录
      File savedImage = await image.copy(imgPath);
      print('Screenshot saved to $imgPath');

      // 可选:显示一个Snackbar通知用户
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Screenshot saved to $imgPath'),
        ),
      );
    } catch (e) {
      print('Error capturing screenshot: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _captureScreenshot,
          child: Text('Capture Screenshot'),
        ),
        // 使用AutoScreenshot widget包裹需要自动截图的区域
        AutoScreenshot(
          controller: _screenshotController,
          child: Container(
            height: 200,
            color: Colors.amber,
            child: Center(
              child: Text(
                'This area will be screenshotted',
                style: TextStyle(fontSize: 24),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 添加依赖:在pubspec.yaml文件中添加了auto_screenshot依赖。
  2. 初始化控制器:在_ScreenshotExampleStateinitState方法中初始化了AutoScreenshotController
  3. 捕获截图:定义了一个_captureScreenshot方法来捕获截图,并将截图保存到应用的文档目录中。
  4. 显示按钮和截图区域:使用ElevatedButton来触发截图操作,并使用AutoScreenshot widget包裹需要截图的区域。

当你点击按钮时,应用会捕获AutoScreenshot widget包裹的区域,并将截图保存到应用的文档目录中。同时,会在屏幕上显示一个Snackbar通知用户截图已保存。

请确保在实际项目中替换auto_screenshot: ^x.y.z为最新版本号,并根据需要调整代码。

回到顶部