Flutter屏幕截图插件native_screenshot的使用

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

Flutter屏幕截图插件native_screenshot的使用

插件简介

native_screenshot 插件旨在通过原生实现截屏功能,以捕捉像相机预览或AR视图等场景。这些场景在纯Flutter中难以实现,至少我无法使用 RenderRepaintBoundary 和类似技术来完成。

与其它包的主要区别在于,它们通常会显示一个分享对话框。而此插件则是保存图像并返回路径。在 Android 上,它还会发起一个更新请求(内部处理)以重新加载媒体库。

安装

添加依赖

在您的 pubspec.yaml 文件中添加:

native_screenshot: ^<latest_version>

Android配置

您必须在 android/src/main/ 目录下的 AndroidManifest.xml 文件中添加以下权限:

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

同时,在 application 标签中添加属性以解决写入 EXTERNAL_STORAGE 的权限问题:

android:requestLegacyExternalStorage="true"

iOS配置

如果未在 ios/Runner 目录下的 info.plist 文件中添加以下内容,应用程序将会崩溃:

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Take pretty screenshots and save it to the PhotoLibrary.</string>

使用方法

首先导入库:

import 'package:native_screenshot/native_screenshot.dart';

然后调用截屏函数:

String path = await NativeScreenshot.takeScreenshot()

如果发生错误,该函数将返回 null;如果成功,则返回截图路径。

示例代码

下面是一个完整的示例应用,演示了如何使用 native_screenshot 插件进行截屏,并展示截取的图片。

import 'dart:io';

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Widget _imgHolder;

  @override
  void initState() {
    super.initState();

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('NativeScreenshot Example'),
        ),
        bottomNavigationBar: ButtonBar(
          alignment: MainAxisAlignment.center,
          children: <Widget>[
            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应用,包含一个按钮用于触发截屏操作。截屏后,它会在屏幕上显示截取的图片,并在底部导航栏中提供反馈信息。


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

1 回复

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


当然,以下是如何在Flutter项目中使用native_screenshot插件进行屏幕截图的示例代码。native_screenshot是一个流行的Flutter插件,用于在Android和iOS平台上捕获屏幕截图。

1. 添加依赖

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

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

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

2. 导入插件

在你的Dart文件中(例如main.dart),导入native_screenshot插件:

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

3. 请求权限(Android)

由于截屏功能可能会涉及到存储权限,因此在Android上你需要请求相关权限。在AndroidManifest.xml中添加存储权限:

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

并在运行时请求权限(如果需要):

import 'package:permission_handler/permission_handler.dart';

Future<void> requestPermissions() async {
  if (Platform.isAndroid) {
    var status = await Permission.storage.status;
    if (!status.isGranted) {
      status = await Permission.storage.request();
      if (!status.isGranted) {
        // 处理权限被拒绝的情况
        return;
      }
    }
  }
}

注意:上面的代码片段使用了permission_handler插件来处理权限请求。你需要在pubspec.yaml中添加这个依赖并运行flutter pub get

4. 捕获屏幕截图

现在你可以使用NativeScreenshot类来捕获屏幕截图了:

void _captureScreenshot() async {
  try {
    File imageFile = await NativeScreenshot.captureWithFileName('screenshot_${DateTime.now().toMillisecondsSinceEpoch()}.png');
    print('Screenshot saved to ${imageFile.path}');

    // 显示截图文件路径(或者你可以做其他处理,比如显示截图预览)
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('Screenshot saved: ${imageFile.path}'),
    ));
  } catch (e) {
    print('Error capturing screenshot: $e');
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('Failed to capture screenshot'),
      backgroundColor: Colors.red,
    ));
  }
}

5. 完整示例

以下是一个完整的示例,展示了如何在Flutter应用中集成和使用native_screenshot插件:

import 'package:flutter/material.dart';
import 'package:native_screenshot/native_screenshot.dart';
import 'package:permission_handler/permission_handler.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    requestPermissions();
  }

  Future<void> requestPermissions() async {
    if (Platform.isAndroid) {
      var status = await Permission.storage.status;
      if (!status.isGranted) {
        status = await Permission.storage.request();
        if (!status.isGranted) {
          // 处理权限被拒绝的情况
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('Storage permission is required to capture screenshots'),
            backgroundColor: Colors.red,
          ));
        }
      }
    }
  }

  void _captureScreenshot() async {
    try {
      File imageFile = await NativeScreenshot.captureWithFileName('screenshot_${DateTime.now().toMillisecondsSinceEpoch()}.png');
      print('Screenshot saved to ${imageFile.path}');

      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Screenshot saved: ${imageFile.path}'),
      ));
    } catch (e) {
      print('Error capturing screenshot: $e');
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to capture screenshot'),
        backgroundColor: Colors.red,
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Screenshot Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _captureScreenshot,
          child: Text('Capture Screenshot'),
        ),
      ),
    );
  }
}

这个示例应用包含了一个按钮,点击按钮时会捕获当前屏幕截图并保存到设备存储中,同时在屏幕上显示截图保存的路径。希望这个示例能帮到你!

回到顶部