Flutter屏幕截图插件native_screenshot_ext的使用

Flutter屏幕截图插件native_screenshot_ext的使用

插件简介

native_screenshot_ext 是一个简单的的Flutter插件，用于在原生平台上捕获屏幕截图。它特别适用于捕捉相机预览或AR视图等场景。在普通Flutter中实现这些功能并不容易。

安装

首先，将以下代码添加到您的 pubspec.yaml 文件中：

native_screenshot: ^<latest_version>

Android 使用指南

  1. 需要在 AndroidManifest.xml 中添加权限：
    &lt;uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /&gt;
  2. 在 application 标签下添加属性以解决权限写入 EXTERNAL_STORAGE 的问题：
    android:requestLegacyExternalStorage="true"

iOS 使用指南

  1. 如果不向 info.plist 添加以下内容，则应用会崩溃：
    &lt;key&gt;NSPhotoLibraryAddUsageDescription&lt;/key&gt;
&lt;string&gt;Take pretty screenshots and save it to the PhotoLibrary.&lt;/string&gt;

使用示例

  1. 导入库：
    import 'package:native_screenshot_ext/native_screenshot_ext.dart';
  2. 捕捉屏幕截图：
    String path = await NativeScreenshot.takeScreenshot();
    • 如果捕获失败，函数返回 null；如果成功，则返回截图路径。

示例代码

以下是完整的示例代码：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:native_screenshot_ext/native_screenshot_ext.dart';

void main() => runApp(MyApp());

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

class _MyAppState extends State<MyApp> {
  late Widget _imgHolder;

  [@override](/user/override)
  void initState() {
    super.initState();

    _imgHolder = Center(
      child: Icon(Icons.image),
    );
  } // initState()

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      homePage: Scaffold(
        appBar: AppBar(
          title: Text('NativeScreenshot Example'),
        ),
        bottomNavigationBar: ButtonBar(
          alignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Press to capture screenshot'),
              onPressed: () async {
                String? path = await NativeScreenshot.takeScreenshot();

                debugPrint('Screenshot taken, path: $path');

                if (path == null || path.isEmpty) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Error taking the screenshot :('),
                      backgroundColor: Colors.red,
                    )
                  ); // showSnackBar()

                  return;
                } // if error

                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('The screenshot has been saved to: $path')
                  )
                ); // showSnackBar()

                File imgFile = File(path);
                _imgHolder = Image.file(imgFile);

                setState(() {});
              },
            )
          ],
        ),
        body: Container(
          constraints: BoxConstraints.expand(),
          child: _imgHolder,
        ),
      ),
    );
  } // build()
} // _MyAppState

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用native_screenshot_ext插件进行屏幕截图的代码示例。这个插件允许你在Flutter应用中轻松捕获屏幕截图，并可以选择保存到设备或者获取为Base64字符串。

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

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

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

接下来，在你的Flutter应用中，你可以按照以下步骤使用native_screenshot_ext插件：

  1. 导入插件：

在你的Dart文件中（例如main.dart），导入插件：

import 'package:flutter/material.dart';
import 'package:native_screenshot_ext/native_screenshot_ext.dart';
  1. 请求权限（如果需要保存到设备）：

由于截图并保存到设备需要存储权限，你需要在Android和iOS上请求这些权限。这里以Android为例，iOS的权限请求类似，但需要在Info.plist中添加相应的权限描述。

在android/app/src/main/AndroidManifest.xml中添加：

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

然后，在Flutter代码中请求权限（可以使用permission_handler插件）：

import 'package:permission_handler/permission_handler.dart';

Future<void> requestPermissions() async {
  if (await Permission.storage.status.isDenied ||
      await Permission.storage.status.isPermanentlyDenied) {
    Map<Permission, PermissionStatus> statuses = await Permission.storage
        .request();
    if (!statuses[Permission.storage]!.isGranted) {
      // 处理权限被拒绝的情况
      return;
    }
  }
}
  1. 捕获屏幕截图：

使用NativeScreenshotExt类来捕获屏幕截图。以下是一个完整的示例，包括一个按钮来触发截图操作：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Capture Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Tap the button to capture screenshot'),
              ElevatedButton(
                onPressed: () async {
                  await requestPermissions(); // 请求权限

                  try {
                    // 捕获屏幕截图
                    final result = await NativeScreenshotExt.captureScreen();

                    // 处理截图结果
                    if (result.success) {
                      final filePath = result.filePath;
                      final base64String = result.base64String;

                      // 打印截图信息
                      print('Screenshot saved at: $filePath');
                      print('Screenshot Base64: $base64String');

                      // 显示一个简单的Snackbar提示
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text('Screenshot captured!'),
                        ),
                      );
                    } else {
                      // 处理错误
                      print('Screenshot failed: ${result.message}');
                    }
                  } catch (e) {
                    // 捕获异常
                    print('Error capturing screenshot: $e');
                  }
                },
                child: Text('Capture Screenshot'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例应用展示了如何使用native_screenshot_ext插件来捕获屏幕截图，并处理截图结果。你可以根据需要将截图保存到设备或作为Base64字符串进行处理。

请注意，由于插件和Flutter框架的不断更新，上述代码可能需要根据你的实际环境进行调整。确保查阅最新的插件文档和API参考。

回到顶部