Flutter屏幕截图插件screenshot_juni1289的使用

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

Flutter屏幕截图插件screenshot_juni1289的使用

插件介绍

screenshot_juni1289 是一个用于Flutter的屏幕截图插件，它可以方便地获取屏幕截图。 该插件的主要功能包括：

  • 权限管理：自动请求存储权限，无需开发者手动添加权限。
  • 全局键支持：通过提供一个唯一的全局键来包裹需要截图的Widget，并传递给插件。
  • 文件名自定义：可以自定义保存的文件名和目录。
  • 回调响应：插件会返回一个回调函数，通知截图是否成功保存。

示例代码

下面是一个完整的示例代码，展示了如何使用screenshot_juni1289插件来获取屏幕截图。

import 'package:flutter/material.dart';
import 'package:screenshot_juni1289/screenshot/helper/screen_shot_helper_util.dart';
import 'package:screenshot_juniit289/screenshot/model/screen_shot_result_helper_model.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var screenShotKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          margin: const EdgeInsets.only(top: 400),
          child: Center(
              child: RepaintBoundary(
                  key: screenShotKey,
                  child: const FlutterLogo(
                    size: 600,
                  )))),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _takeScreenShot(context, screenShotKey);
        },
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  void _takeScreenShot(
      BuildContext context, GlobalKey&lt;State&lt;StatefulWidget&gt;&gt; screenShotKey) {
    ScreenShotHelperUtil.instance.takeAndSaveScreenShot(
        context: context,
        repaintBoundaryKey: screenShotKey,
        filename: ScreenShotHelperUtil.instance
            .getFileNameForSave(fileNamePrefix: "screenshot_"),
        imageToSaveCustomDirectoryName: "ScreenShot_juni1289",
        onScreenShotSavedCallback:
            (ScreenShotHelperModel? screenShotHelperModel) {
          if (screenShotHelperModel != null) {
            //all good here
            if (screenShotHelperModel.saveSuccess) {
              //screen shot taken
              if (screenShotHelperModel.savedImagePath != null &amp;&amp;
                  screenShotHelperModel.savedImagePath!.isNotEmpty) {
                //the the screen shot is finally saved, bingo!
              }
            }
          }
        });
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用screenshot_juni1289插件来进行屏幕截图的示例代码。这个插件允许你捕获当前屏幕的截图，并以图像文件的形式保存或进行其他处理。

首先，确保你已经在pubspec.yaml文件中添加了screenshot_juni1289依赖：

dependencies:
  flutter:
    sdk: flutter
  screenshot: ^1.2.3  # 请注意，实际版本号可能会有所不同，请查看pub.dev上的最新版本

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

接下来，你可以在你的Flutter项目中按如下方式使用它：

import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;
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('Screenshot Example'),
        ),
        body: Center(
          child: ScreenshotWidget(),
        ),
      ),
    );
  }
}

class ScreenshotWidget extends StatefulWidget {
  @override
  _ScreenshotWidgetState createState() => _ScreenshotWidgetState();
}

class _ScreenshotWidgetState extends State<ScreenshotWidget> {
  GlobalKey _globalKey = GlobalKey();
  Uint8List? _screenshotBytes;

  Future<void> _capturePng() async {
    try {
      // Capture the screenshot
      final ScreenshotController screenshotController = ScreenshotController();
      await screenshotController.captureFromWidget(
        context,
        _globalKey.currentContext!,
      ).then((File image) async {
        // Save the screenshot to the device storage
        final Directory appDocDir = await getApplicationDocumentsDirectory();
        final String appDocPath = appDocDir.path;
        final String imgPath = '${appDocPath}/screenshot.png';
        image.renameSync(imgPath);
        print('Screenshot saved at $imgPath');

        // Optionally, load the screenshot bytes for further use
        final Uint8List bytes = await image.readAsBytes();
        setState(() {
          _screenshotBytes = bytes;
        });
      });
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          key: _globalKey,
          height: 300,
          width: 300,
          color: Colors.amber,
          child: Center(
            child: Text(
              'Capture this widget',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _capturePng,
          child: Text('Capture Screenshot'),
        ),
        if (_screenshotBytes != null)
          SizedBox(
            height: 20,
          ),
          Image.memory(_screenshotBytes!),
      ],
    );
  }
}

代码说明：

  1. 依赖添加：在pubspec.yaml文件中添加screenshot依赖。
  2. 主应用：创建一个简单的Flutter应用，其中包含一个ScreenshotWidget。
  3. 截图小部件：ScreenshotWidget是一个有状态的小部件，它包含一个要截图的容器和一个按钮。
  4. 截图逻辑：点击按钮时，调用_capturePng函数。这个函数使用ScreenshotController来捕获指定小部件的截图，并将其保存为PNG文件到应用的文档目录中。同时，它还将截图以字节数组的形式加载到内存中，以便后续使用（如显示在UI上）。
  5. 显示截图：如果截图成功并加载到内存中，则在按钮下方显示截图。

请注意，由于screenshot_juni1289可能不是官方的或广泛使用的包名（官方包名为screenshot），如果确实存在一个名为screenshot_juni1289的特定包，请确保替换为正确的包名并调整代码以适应该包的API。上面的示例是基于广泛使用的screenshot包编写的。

回到顶部