Flutter故事编辑器插件flutter_story_editor的使用

Flutter故事编辑器插件flutter_story_editor的使用

简介

flutter_story_editor 是一个基于 WhatsApp 故事风格的图片和视频编辑器插件，允许用户同时编辑图片和视频。你可以添加文本、贴纸、自由手绘、应用滤镜，并且支持撤销操作。编辑后的图片将通过 onSave 回调返回为 List<File>，你可以将其上传到存储或保存到本地相册。

功能

• ✅ 编辑图片和视频
• ✅ 可拖动的花哨文本（自定义颜色、字体、调整大小）
• ✅ 可拖动的贴纸和表情符号
• ✅ 应用滤镜到图片
• ✅ 在图片上自由手绘
• ✅ 剪辑视频帧

未来功能

• 🚀 在视频帧上绘制绘画（需要平台特定的工作）
• 🚀 更多图片和视频编辑功能（如 WhatsApp 和 Instagram 故事）
• 🚀 UI 目前类似 WhatsApp，但可以设计独特的 Flutter 风格（欢迎贡献和建议）
• 🚀 改善和增强性能及现有功能

插件演示

安装

1. 添加依赖

在 pubspec.yaml 文件中添加 flutter_story_editor：

dependencies:
  flutter_story_editor: latest_version

然后导入插件：

import 'package:flutter_story_editor/flutter_story_editor.dart';

2. Android 配置

在 AndroidManifest.xml 文件中添加以下代码：

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

3. iOS 配置

在 info.plist 文件中添加以下代码：

<key>NSCameraUsageDescription</key>
<string>用于演示图像选择插件</string>
<key>NSMicrophoneUsageDescription</key>
<string>用于捕捉音频以供图像选择插件使用</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>用于演示图像选择插件</string>

使用方法

1. 初始化控制器

在 StatefulWidget 的 State 中初始化控制器：

FlutterStoryEditorController controller = FlutterStoryEditorController();
final TextEditingController _captionController = TextEditingController();

2. 选择媒体文件

创建一个方法来选择媒体文件（图片和视频）：

List<File>? _selectedMedia;
List<String>? _mediaTypes; // 用于存储每个选定文件的类型

Future<void> selectMedia() async {
  setState(() {
    _selectedMedia = null;
    _mediaTypes = null;
  });

  try {
    final result = await FilePicker.platform.pickFiles(
      type: FileType.media,
      allowMultiple: true,
    );
    if (result != null) {
      _selectedMedia = result.files.map((file) => File(file.path!)).toList();

      // 初始化媒体类型列表
      _mediaTypes = List<String>.filled(_selectedMedia!.length, '');

      // 确定每个选定文件的类型
      for (int i = 0; i < _selectedMedia!.length; i++) {
        String extension = path.extension(_selectedMedia![i].path).toLowerCase();
        if (extension == '.jpg' || extension == '.jpeg' || extension == '.png') {
          _mediaTypes![i] = 'image';
        } else if (extension == '.mp4' || extension == '.mov' || extension == '.avi') {
          _mediaTypes![i] = 'video';
        }
      }

      setState(() {});
    }
  } catch (e) {
    throw Exception("无法选择文件，请重试");
  }
}

3. 显示编辑器

在选择媒体文件后，显示 FlutterStoryEditor 编辑器：

selectMedia().then((value) {
  if (_selectedMedia != null && _selectedMedia!.isNotEmpty) {
    showModalBottomSheet(
      isScrollControlled: true,
      isDismissible: false,
      enableDrag: false,
      context: context,
      builder: (context) {
        return FlutterStoryEditor(
          controller: controller,
          captionController: _captionController,
          selectedFiles: _selectedMedia,
          onSaveClickListener: (files) {
            // 这里处理编辑后的文件
          },
        );
      },
    );
  }
});

4. 完整示例代码

import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_story_editor/flutter_story_editor.dart';
import 'package:path/path.dart' as path;

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

  [@override](/user/override)
  State<FlutterStoryEditorExample> createState() => _FlutterStoryEditorExampleState();
}

class _FlutterStoryEditorExampleState extends State<FlutterStoryEditorExample> with SingleTickerProviderStateMixin {

  FlutterStoryEditorController controller = FlutterStoryEditorController();
  final TextEditingController _captionController = TextEditingController();

  List<File>? _selectedMedia;
  List<String>? _mediaTypes; // 用于存储每个选定文件的类型

  Future<void> selectMedia() async {
    setState(() {
      _selectedMedia = null;
      _mediaTypes = null;
    });

    try {
      final result = await FilePicker.platform.pickFiles(
        type: FileType.media,
        allowMultiple: true,
      );
      if (result != null) {
        _selectedMedia = result.files.map((file) => File(file.path!)).toList();

        // 初始化媒体类型列表
        _mediaTypes = List<String>.filled(_selectedMedia!.length, '');

        // 确定每个选定文件的类型
        for (int i = 0; i < _selectedMedia!.length; i++) {
          String extension = path.extension(_selectedMedia![i].path).toLowerCase();
          if (extension == '.jpg' || extension == '.jpeg' || extension == '.png') {
            _mediaTypes![i] = 'image';
          } else if (extension == '.mp4' || extension == '.mov' || extension == '.avi') {
            _mediaTypes![i] = 'video';
          }
        }

        setState(() {});
      }
    } catch (e) {
      throw Exception("无法选择文件，请重试");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: IconButton(
              onPressed: () {
                selectMedia().then((value) {
                  if (_selectedMedia != null && _selectedMedia!.isNotEmpty) {
                    showModalBottomSheet(
                      isScrollControlled: true,
                      isDismissible: false,
                      enableDrag: false,
                      context: context,
                      builder: (context) {
                        return FlutterStoryEditor(
                          controller: controller,
                          captionController: _captionController,
                          selectedFiles: _selectedMedia,
                          onSaveClickListener: (files) {
                            // 这里处理编辑后的文件
                          },
                        );
                      },
                    );
                  }
                });
              },
              icon: const Icon(Icons.upload, size: 50),
            ),
          ),
          const SizedBox(height: 10),
          const Text("选择文件并进行编辑"),
        ],
      ),
    );
  }
}