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

简介

flutter_stories_editor 是一个用于Flutter应用的故事编辑和查看插件。它允许用户创建、编辑和查看多媒体故事，包括文本、图片、视频等元素，并支持互动功能如投票、问题和链接。

主要特性

故事编辑器

• 创建故事：允许用户添加文本、图片、视频等元素来创建新故事。
• 编辑已有故事：允许用户修改已有的故事，替换或新增媒体文件。
• 互动元素：可以添加投票、问题和链接等交互式组件。
• 预览：在发布前预览故事效果。

故事查看器

• 查看故事：浏览其他用户或管理员创建的故事。

准备工作

配置原生平台

最低版本要求：

• Android 16
• iOS 9.0
• macOS 10.15

iOS配置准备

在 ios/Runner/Info.plist 文件中定义以下权限：

<key>NSPhotoLibraryUsageDescription</key>
<string>In order to access your photo library</string>
<key>NSCameraUsageDescription</key>
<string>Your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your usage description here</string>

使用方法

添加依赖

将插件添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter_stories_editor: ^0.0.1

导入插件

在 Dart 代码中导入插件：

import 'package:flutter_stories_editor/flutter_stories_editor.dart';

示例代码

下面是一个完整的示例 DEMO：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  StoryModel? storyModel;

  final EditorController editorController = EditorController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            IconButton(
              onPressed: () async {
                editorController.addCustomAsset(
                  type: CustomAssetType.audio,
                  url: 'https://storage.googleapis.com/jiggl-bucket/backend/files/2024/05/03/11173305733636.mp3',
                );
              },
              icon: const Icon(Icons.audiotrack),
            ),
            IconButton(
              onPressed: () async {
                editorController.removeElement(editorController.assets.value.last);
              },
              icon: const Icon(Icons.delete),
            ),
            IconButton(
              onPressed: () async {
                editorController.addCustomAsset(
                  type: CustomAssetType.image,
                  url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/2048px-Instagram_icon.png',
                );
              },
              icon: const Icon(Icons.image),
            ),
            IconButton(
              onPressed: () async {
                if (storyModel == null) {
                  storyModel = await editorController.complete();
                } else {
                  storyModel = null;
                }
                setState(() {});
              },
              icon: const Icon(Icons.check),
            ),
          ],
        ),
        body: SafeArea(
          child: Column(
            children: <Widget>[
              const SizedBox(height: 16),
              if (storyModel == null)
                Expanded(
                  child: FlutterStoriesEditor(
                    controller: editorController,
                    backgroundColor: Colors.pink,
                    onDone: (Future<StoryModel> story) async {
                      storyModel = await story;
                      setState(() {});
                    },
                    onClose: (Future<StoryModel> story) {
                      print('Story editor closed');
                    },
                  ),
                )
              else
                Expanded(
                  child: FlutterStoriesViewer(
                    storyModel: storyModel!,
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

编辑控制器方法

EditorController 提供了多种方法来操作编辑器中的内容：

// 打开资源选择器
Future<void> addImage(BuildContext context);

// 添加文本元素到编辑器
void addText();

// 完成编辑并返回故事模型
StoryModel complete({String? id});

// 切换滤镜选择器
void toggleFilter();

// 编辑文本元素
void editText(StoryElement storyElement);

// 添加自定义文件资产
void addCustomAsset({
  XFile? file,
  String? url,
  required CustomAssetType type,
});

// 添加自定义小部件作为资产
void addCustomWidgetAsset(Widget widget);

显示故事

使用 FlutterStoriesViewer 小部件显示故事：

FlutterStoriesViewer(
  storyModel: storyModel,
  backgroundColor: Colors.pink,
)