Flutter文件分享与截图小部件插件 share_files_and_screenshot_widgets_plus 的使用

简介

share_files_and_screenshot_widgets_plus 是一个用于在 Flutter 应用中实现文件分享和截图功能的插件。它支持分享各种类型的文件（如 CSV、MP4、PNG 等），并且可以对指定的小部件进行截图并返回为图片，还可以直接分享这些图片。

重要提示

该插件是基于作者的原始库 share_files_and_screenshot_widgets 进行了空安全（null safety）升级。

使用方法

添加依赖

首先，在 pubspec.yaml 文件中添加该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  share_files_and_screenshot_widgets_plus: ^1.0.4

示例代码

以下是一个完整的示例 Demo，展示了如何使用该插件进行截图和文件分享。

完整示例 Demo

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:share_files_and_screenshot_widgets_plus/share_files_and_screenshot_widgets_plus.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter ScreenShot Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo ScreenShot Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget? _image;
  GlobalKey previewContainer = GlobalKey();
  int originalSize = 800;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              RepaintBoundary(
                key: previewContainer,
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(width: 1.5),
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.deepPurple,
                  ),
                  padding: EdgeInsets.all(15),
                  margin: EdgeInsets.all(20),
                  width: MediaQuery.of(context).size.width - 40,
                  height: MediaQuery.of(context).size.height,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Text(
                        "This is a picture.",
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                      Image.asset("assets/example.jpg"),
                      Text(
                        "There’s something so whimsical about these beautiful images that incorporate bokeh. It’s almost as if they could be from a different, magical world. We’ve loved watching the submissions fly in for our bokeh-themed Photo Quest by Meyer-Optik-Görlitz and selected 30+ of our favourites beautiful images to ignite your creative spark! The three lucky winners of this Quest are going to receive an incredible prize courtesy of master lens-crafters Meyer-Optik.",
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Container(
                    child: ElevatedButton(
                      child: Text("Take Screenshot!"),
                      onPressed: () async {
                        ShareFilesAndScreenshotWidgets()
                            .takeScreenshot(previewContainer, originalSize)
                            .then((Image value) {
                          setState(() {
                            _image = value;
                          });
                        });
                      },
                    ),
                  ),
                  Container(
                    child: ElevatedButton(
                      child: Text("Share Screenshot!"),
                      onPressed: () {
                        ShareFilesAndScreenshotWidgets().shareScreenshot(
                          previewContainer,
                          originalSize,
                          "Title",
                          "Name.png",
                          "image/png",
                          text: "This is the caption!",
                        );
                      },
                    ),
                  ),
                  Container(
                    child: ElevatedButton(
                      child: Text("Share Image!"),
                      onPressed: () async {
                        ByteData bytes =
                            await rootBundle.load('assets/example.jpg');
                        Uint8List list = bytes.buffer.asUint8List();
                        ShareFilesAndScreenshotWidgets().shareFile(
                          "Title",
                          "Name.jpg",
                          list,
                          "image/jpg",
                          text: "This is the caption!",
                        );
                      },
                    ),
                  ),
                  Container(
                    child: ElevatedButton(
                      child: Text("Share Video!"),
                      onPressed: () async {
                        ByteData bytes =
                            await rootBundle.load('assets/example.mp4');
                        Uint8List list = bytes.buffer.asUint8List();
                        ShareFilesAndScreenshotWidgets().shareFile(
                          "Title",
                          "Name.mp4",
                          list,
                          "video/mp4",
                          text: "This is the caption!",
                        );
                      },
                    ),
                  ),
                  Container(
                    child: ElevatedButton(
                      child: Text("Share Audio!"),
                      onPressed: () async {
                        ByteData bytes =
                            await rootBundle.load('assets/example.mp3');
                        Uint8List list = bytes.buffer.asUint8List();
                        ShareFilesAndScreenshotWidgets().shareFile(
                          "Title",
                          "Name.mp3",
                          list,
                          "audio/mp3",
                          text: "This is the caption!",
                        );
                      },
                    ),
                  ),
                ],
              ),
              _image ?? Container(),
            ],
          ),
        ),
      ),
    );
  }
}

如何使用

截取小部件的截图

1. 定义全局键：

   GlobalKey previewContainer = GlobalKey();
   

2. 将需要截图的小部件包裹在 RepaintBoundary 中：

   RepaintBoundary(
     key: previewContainer,
     child: YourWidget(),
   )
   

3. 调用 takeScreenshot 方法截取截图：

   ShareFilesAndScreenshotWidgets()
       .takeScreenshot(previewContainer, originalSize)
       .then((Image value) {
     setState(() {
       _image = value;
     });
   });
   

直接分享小部件的截图

1. 定义全局键：

   GlobalKey previewContainer = GlobalKey();
   

2. 将需要截图的小部件包裹在 RepaintBoundary 中：

   RepaintBoundary(
     key: previewContainer,
     child: YourWidget(),
   )
   

3. 调用 shareScreenshot 方法直接分享截图：

   ShareFilesAndScreenshotWidgets().shareScreenshot(
     previewContainer,
     originalSize,
     "Title",
     "Name.png",
     "image/png",
     text: "This is the caption!",
   );
   

分享任意类型的文件

1. 加载文件数据：

   ByteData bytes = await rootBundle.load('assets/example.jpg');
   Uint8List list = bytes.buffer.asUint8List();
   

2. 调用 shareFile 方法分享文件：

   ShareFilesAndScreenshotWidgets().shareFile(
     "Title",
     "Name.jpg",
     list,
     "image/jpg",
     text: "This is the caption!",
   );
   

iOS 注意事项

在 iOS 上，如果你想在分享对话框中提供保存文件的选项，你的项目需要使用 Swift 创建，并且需要在 Info.plist 文件中添加以下键值：

<key>NSPhotoLibraryAddUsageDescription</key>
<string>描述为什么你的应用需要访问相册权限。</string>