Flutter自定义故事编辑器插件custom_story_editor的使用

Flutter自定义故事编辑器插件custom_story_editor的使用

这个插件是基于WhatsApp故事图片/视频编辑器的风格创建的，可以让你同时编辑图片和视频。你可以添加文本、贴纸、自由手绘、应用滤镜，并支持撤销功能。编辑后的图片将以List of Files的形式通过onSave回调返回。然后你可以将这些文件上传到某些存储空间或将它们保存到本地相册。

特性

  • ✅ 可以同时编辑图片和视频。
  • ✅ 可拖拽的带自定义颜色、字体家族和大小调整的文本。
  • ✖️ 不支持可拖拽的贴纸和表情符号。
  • ✅ 可以对图片应用滤镜。
  • ✅ 可以在图片上进行自由手绘。
  • ✅ 支持裁剪视频帧。

未来特性

  • 🚀 在视频帧上进行绘画（需要平台特定的工作）。
  • 🚀 增加更多图片和视频编辑功能，如WhatsApp和Instagram故事中的功能。
  • 🚀 提高现有功能的性能和增强用户体验。

插件演示

演示1 演示2 演示3

安装

在你的pubspec.yaml文件中添加custom_story_editor: latest_version，然后导入它。

import 'package:custom_story_editor/custom_story_editor.dart';

Android

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

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

iOS

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

<key>NSCameraUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>
<key>NSMicrophoneUsageDescription</key>
<string>Used to capture audio for image picker plugin</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>

如何使用

// 在状态中初始化控制器
CustomStoryEditorController controller = CustomStoryEditorController();
final TextEditingController _captionController = TextEditingController();

// TODO: 创建一个方法来选择文件（视频和图片）要么分开要么一起选择。

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

更多关于Flutter自定义故事编辑器插件custom_story_editor的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义故事编辑器插件custom_story_editor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，如果你想要创建一个自定义的故事编辑器插件，比如 custom_story_editor，你需要考虑以下几个关键点：

  1. UI设计：设计一个用户友好的界面，允许用户添加文本、图片、视频等内容。
  2. 内容管理：管理和存储用户输入的内容。
  3. 交互功能：提供交互功能，如拖放、缩放、旋转等。
  4. 导出功能：允许用户将故事导出为特定格式（如JSON、HTML等）。

下面是一个简单的示例，展示如何创建一个基本的自定义故事编辑器插件。

1. 创建Flutter插件

首先，使用以下命令创建一个Flutter插件：

flutter create --template=plugin custom_story_editor

2. 设计UI

在 lib/custom_story_editor.dart 文件中，设计一个简单的UI，允许用户添加文本和图片。

import 'package:flutter/material.dart';

class CustomStoryEditor extends StatefulWidget {
  @override
  _CustomStoryEditorState createState() => _CustomStoryEditorState();
}

class _CustomStoryEditorState extends State<CustomStoryEditor> {
  List<Widget> storyElements = [];

  void addTextElement() {
    setState(() {
      storyElements.add(
        TextField(
          decoration: InputDecoration(
            hintText: 'Enter your text here',
          ),
        ),
      );
    });
  }

  void addImageElement() {
    // Implement image picker logic here
    setState(() {
      storyElements.add(
        Image.network('https://via.placeholder.com/150'),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Story Editor'),
      ),
      body: ListView(
        children: storyElements,
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: addTextElement,
            child: Icon(Icons.text_fields),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: addImageElement,
            child: Icon(Icons.image),
          ),
        ],
      ),
    );
  }
}

3. 使用插件

在你的Flutter应用中，使用 CustomStoryEditor 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomStoryEditor(),
    );
  }
}

4. 添加更多功能

你可以继续扩展这个插件，添加更多功能，比如：

  • 视频支持：允许用户添加视频。
  • 保存和加载故事：实现保存和加载故事的功能。
  • 导出故事：将故事导出为JSON或其他格式。

5. 发布插件

如果你希望其他人也能使用这个插件，你可以将其发布到 pub.dev 上。在 pubspec.yaml 文件中添加必要的元数据，然后运行以下命令发布：

flutter pub publish
回到顶部