Flutter自动截图翻译插件auto_screenshot_translate的使用

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

Flutter自动截图翻译插件auto_screenshot_translate的使用

Pub

一个库，它可以按语言进行截图，然后按语言创建并分发商店图片。

截图

如何使用？

0. 准备

以下库必须设置以应用此库：

1. 设置配置文件

在 pubspec.yaml 文件中添加以下依赖项：

dev_dependencies:
  flutter_driver:
    sdk: flutter
  emulators: ^0.5.1
  auto_screenshot_translate:
  test: ^1.17.12

2. 创建Android/iOS模拟器

应根据商店大小创建。请参考此链接。

Android
  1. 打开Android Studio。
  2. 工具 - 设备管理器 - 创建设备 - 新硬件配置文件
    • Samsung Galaxy S10
      • 设备名称: Samsung Galaxy S10
      • 屏幕 - 分辨率: 1440 x 3040
      • 单击下一步直到 “验证配置” 步骤
      • 单击 “显示高级设置”
      • 模拟性能 - 启动选项: 冷启动
      • 内存和存储 - 内部存储: 大于2000MB
    • Nexus 9
      • 设备名称: Nexus 9
      • 屏幕 - 分辨率: 1536 x 2048
      • 单击下一步直到 “验证配置” 步骤
      • 单击 “显示高级设置”
      • 模拟性能 - 启动选项: 冷启动
      • 内存和存储 - 内部存储: 大于2000MB
iOS
  1. 打开Xcode
    • 菜单栏中的窗口
    • 单击 “设备和模拟器”
    • 单击左上角的 “模拟器”
    • 单击左下角的 “+”
    • 添加
      • iPhone 8
      • iPhone 8 Plus
      • iPad Pro (12.9英寸) (第5代)
      • iPhone 15 Pro Max

3. 设置.gitignore

由于有数百张图片，需要排除这些图片以避免提交到Git。

/auto_translation/screenshots/
/auto_translation/framed/
/auto_translation/metadata/

4. 在应用程序中设置截图场景

在拍摄截图之前，需要设置要拍摄截图的屏幕。

1. 下载文本驱动文件text_drive.zip，并将其放在项目根目录中。

下载的文件

  • 请设置要截图的部分并插入截图代码。详情请参阅官方文档。
2. 在项目根目录中创建 “auto_translation” 目录。

创建目录

3. 下载frameit-chrome.zip 文件夹，并将其放在 “auto_translation” 目录中。

下载文件夹

5. 在 “auto_translation” 目录中创建 “screenshots/frameit.yaml” 文件。
# 可选配置以进一步自定义frameit_chrome

# 重写文件名模式。
rewrite:
  - pattern: 'samsung-galaxy-s10-plus'
    replace: 'samsungapps-samsung-galaxy-s10-plus'
    action: duplicate

# 自定义图像。
images:
  samsungapps-samsung-galaxy-s10-plus:
    cropHeight: 2600
    device: 'samsung-galaxy-s10-plus'
    previewLabel: 'Samsung App Store'
    css: |
       .scene {
         background: rgb(34,193,195);
         background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
       }
       .frame-bg-shadow {
           filter: drop-shadow(25px 25px 15px blue);
       }
6. 在 “auto_translation” 目录中创建 “make_screenshots.dart” 文件，并写入以下代码。
import 'dart:io';

import 'package:emulators/emulators.dart';
import 'package:auto_screenshot_translate/callable/core_my/my_language_code/entity/flutter_support_language_for_screenshot.dart';

Future<void> main() async {
  final emu = await Emulators.build();

  await emu.shutdownAll();

  List<String> devices = [
    'nexus_9',
    'Samsung_Galaxy_S10',
    'iPhone 8 Plus',
    'iPhone 8',
    'iPad Pro (12.9-inch) (5th generation)',
    'iPhone 15 Pro Max',
  ];

  for (int i = 0; i < devices.length; i++) {
    await emu.forEach([devices[i]])((device) async {
      for (final c in flutterLocalizeSupportLanguagesForScreenShot) {
        var p = await emu.drive(
          device,
          'test_driver/page1.dart',
          config: c,
        );
        stderr.addStream(p.stderr);
        await stdout.addStream(p.stdout);

        p = await emu.drive(
          device,
          'test_driver/page2.dart',
          config: c,
        );
        stderr.addStream(p.stderr);
        await stdout.addStream(p.stdout);

        p = await emu.drive(
          device,
          'test_driver/page3.dart',
          config: c,
        );
        stderr.addStream(p.stderr);
        await stdout.addStream(p.stdout);

        p = await emu.drive(
          device,
          'test_driver/page4.dart',
          config: c,
        );
        stderr.addStream(p.stderr);
        await stdout.addStream(p.stdout);

        p = await emu.drive(
          device,
          'test_driver/page5.dart',
          config: c,
        );
        stderr.addStream(p.stderr);
        await stdout.addStream(p.stdout);
      }
    });
  }
}
7. 在项目根目录中打开终端并输入以下命令以创建截图。
dart auto_translation/make_screenshots.dart
8. 您可以在 “auto_translation/screenshots” 目录中看到截图。

截图目录

9. 删除Galaxy截图文件名中的下划线。
  • 在 “auto_translation” 目录中创建名为 “frame_galaxy_remove_under_bar.dart” 的Dart文件，并写入以下代码。
import 'package:auto_screenshot_translate/auto_screenshot_translate.dart';

Future<void> main() async {
  AutoScreenshotTranslate.removeUnderBarInGalaxy();
}
  • 在终端中运行此文件。
dart auto_translation/frame_galaxy_remove_under_bar.dart
10. 为生成商店图片准备截图标题。
  • 在 “auto_translation” 目录中创建名为 “frame_prepare.dart” 的Dart文件，并写入以下代码。
import 'package:auto_screenshot_translate/auto_screenshot_translate.dart';
import 'package:auto_screenshot_translate/callable/core_my/my_screenshot_helper/entity/my_screenshot_info.dart';

Future<void> main() async {
  MyScreenshotInfo myScreenshotInfo = MyScreenshotInfo(
    // 不使用
    screenshotTitle01: "",
    screenshotTitle02: "",
    screenshotTitle03: "",
    screenshotTitle04: "",
    screenshotTitle05: "",

    // 使用（截图顶部文本）
    screenshotSubTitle01: "",
    screenshotSubTitle02: "",
    screenshotSubTitle03: "",
    screenshotSubTitle04: "",
    screenshotSubTitle05: "",

    // 截图开始语言用于翻译
    screenshotStartLanguageCode: "en",
    googleTranslateApiKey: '',
  );

  AutoScreenshotTranslate.prepareGenerateScreenshotFrame(myScreenshotInfo);
}
  • 填写 screenshotSubTitle0~ 以包含您希望使用的说明，并在项目根目录终端中运行以下代码。
dart auto_translation/frame_prepare.dart
  • 翻译后，您可以在 “auto_translation/screenshots” 目录中看到 “keyword.strings” 文件。

keyword.strings文件

11. 在frameit-chrome文件夹的pubspec.yaml位置打开终端并输入以下内容。
cd auto_translation/frameit-chrome
brew install dart@2.12
brew info dart@2.12
export PATH="/opt/homebrew/opt/dart@2.12/libexec/bin:$PATH"
dart pub get
12. 在项目根目录终端中输入以下命令以生成商店图片。
brew install dart@2.12
brew info dart@2.12
export PATH="/opt/homebrew/opt/dart@2.12/libexec/bin:$PATH"
dart auto_translation/frameit-chrome/bin/frameit_chrome.dart
13. 您可以看到商店图片在 “auto_translation/framed” 目录中生成如下所示。

生成的图片

14. 将生成的文件移动到Fastlane可以理解的文件结构中。
  • 在 “auto_translation” 目录中创建名为 “framed_distribute.dart” 的Dart文件，并写入以下代码。
import 'package:auto_screenshot_translate/auto_screenshot_translate.dart';

Future<void> main() async {
  AutoScreenshotTranslate.distributeScreenshotFrameFile();
}
  • 在终端中运行此文件。
dart auto_translation/framed_distribute.dart
  • 您可以看到Fastlane可以理解的文件结构。

Fastlane文件结构

15. 部署到Play Store和App Store。

Play Store

  1. 设置fastlane配置文件（Android）

    请参考官方文档 和 auto_store_translate 库。

  2. 在 android/fastlane/fastfile 文件中添加以下代码。

    lane :metaWithScreenshot do
  upload_to_play_store(
      track: 'internal',
      metadata_path: '../auto_translation/metadata/android',
      skip_upload_changelogs: true,
      release_status: 'draft',
      aab: '../build/app/outputs/bundle/release/app-release.aab',
  )
end

  3. 在Android项目的终端中输入以下命令。

    fastlane metaWithScreenshot

  4. 您将在Play Store控制台中看到翻译信息。

Play Store控制台

App Store

  1. 设置fastlane配置文件（iOS）

    请参考官方文档。

  2. 在 ios/fastlane/fastfile 文件中添加以下代码。

    lane :onlyScreenShotOverWrite do
  get_certificates           # 调用cert
  get_provisioning_profile   # 调用sigh
  deliver(
      skip_metadata: true,
      screenshots_path: '../metadata/ios/screenshots',
      overwrite_screenshots: true,
      force: true, # 跳过HTML报告验证
      # skip_screenshots: true,
      skip_binary_upload: true,
  )
end

  3. 在iOS项目的终端中输入以下命令。

    fastlane onlyScreenShotOverWrite

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中集成和使用auto_screenshot_translate插件的示例代码。这个插件可以帮助你自动截图并翻译屏幕上的文本。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  auto_screenshot_translate: ^最新版本号  # 请替换为实际最新版本号

2. 导入包

在你的Flutter项目的主文件（例如main.dart）中导入auto_screenshot_translate包：

import 'package:auto_screenshot_translate/auto_screenshot_translate.dart';

3. 初始化插件

在你的应用初始化时（例如在MyApp类的构造函数或initState方法中），初始化AutoScreenshotTranslate插件：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    AutoScreenshotTranslate.init(
      apiKey: '你的百度翻译API密钥',  // 替换为你的百度翻译API密钥
      sourceLanguage: 'auto',  // 源语言，可以设置为'auto'自动检测
      targetLanguage: 'en',  // 目标语言，例如英语
    );

    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

4. 使用截图翻译功能

在你的应用中的某个按钮或某个事件触发时调用截图翻译功能。例如，在HomeScreen类中：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Auto Screenshot Translate Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, this is a text to be translated!',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                // 截图并翻译
                String translatedText = await AutoScreenshotTranslate.translate();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Translated Text: $translatedText'),
                  ),
                );
              },
              child: Text('Translate Screen'),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

  1. API Key：确保你已经从百度翻译API获取了有效的API密钥，并替换示例代码中的你的百度翻译API密钥。
  2. 权限：由于需要截图，请确保在AndroidManifest.xml和Info.plist中添加了必要的权限。

Android权限（AndroidManifest.xml）

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

iOS权限（Info.plist）

对于iOS，你可能需要添加照片库访问权限，因为截图通常保存在照片库中：

<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library to take screenshots.</string>

完整示例

以上代码提供了一个基本的示例，展示了如何集成和使用auto_screenshot_translate插件。根据你的具体需求，你可能需要进行更多的配置和错误处理。

希望这个示例对你有帮助！如果你有任何其他问题，请随时提问。

回到顶部