搜索插件、代码仓与 APP 分类

whatsapp_story_editor 封面
插件详情v0.0.6

whatsapp_story_editor

一个 Flutter 包,用于添加类似于 WhatsApp 的故事编辑功能。

AndroidiOS
近 30 天下载
35
喜欢数
42
Pub 分数
140

安装插件

flutter pub add whatsapp_story_editor

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,使开发者能够将其应用中集成类似 WhatsApp 的故事编辑功能。它提供了添加文本、贴纸、绘画和滤镜的工具,支持 Android 和 iOS 平台。该包简化了交互式、视觉效果丰富的故事创建,非常适合社交媒体或消息应用。它通过平台通道利用原生功能,实现流畅性能和一致的用户体验。

适合场景

  • 创建社交媒体故事
  • 使用故事功能构建消息应用
  • 添加创意内容编辑
  • 启用用户生成的故事分享
  • 集成贴纸和文字叠加

主要特点

  • 文本和贴纸添加
  • 绘图和素描工具
  • 过滤和效果应用
  • 跨平台兼容性
  • 与 Flutter 的简单集成

适合对象

  • 社交网络应用
  • 消息平台
  • 创意内容工具
  • 移动应用开发者
  • 基于故事的用户参与

使用建议

  • 需要平台特定的设置
  • 有限的自定义选项
  • 依赖原生 SDK
  • 可能需要额外的样式
  • 最适合基本的故事编辑需求

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Flutter package to add story editing features similar to Whatsapp. Make Stories like whatsapp and add texts, stickers, painting on your photo along with basic features like crop, rotation, and also add captions to it.

How to Use

To use whatsapp_story_editor, follow the following steps:

Step1: Adding plugin dependency

add the plugin to your pubspec.yaml file:

whatsapp_story_editor: [latest_version]
Step2: Importing the package.

import the plugin in [your_file].dart

import 'package:whatsapp_story_editor/whatsapp_story_editor.dart';
Step3: Navigate to Whatsapp Story Editor Page

Navigate to WhatsappStortEditor Page on button click, you can find a whatsapp Camera button in the example file for reference. It will land you to the camera page which allows you to capture or select the photo from gallery upon your conscent.

 Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const WhatsappStoryEditor()),
);

this returns an Object containing the edited photo and caption as Future as:

  Navigator.push(
                context,
                MaterialPageRoute(
                      builder: (context) => const WhatsappStoryEditor()),
                ).then((whatsappStoryEditorResult) {
                  if (whatsappStoryEditorResult != null) {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => SavedImageView(
                                image: whatsappStoryEditorResult.image,
                                caption: whatsappStoryEditorResult.caption,
                              )),
                    );
                }
                });
);

Note that the whatsappStoryEditorResult could be null if the user dosnt makes any edit on the photo and leaves. SavedImageView is the page where you could show the edited photo and caption. You may change as you need it to be.

Example

Please refer to the example file for detailed usage and example here

Example Images:

Created by Javeria Iffat

Future Work

For now, only one image editing capability is being handled by Whatsapp Story Editor in this version.

FAQ

In case you need: to add new feature or you get any error or any help, please contact me at javeriaiffat312@gmail.com or javeria.iffat@lums.edu.pk please be kind if you get any errors, text me I'll be more than happy to help you all.

THANK YOU!

所属分类

依赖

依赖清单 11 项

源码仓库

使用此插件的项目

暂无相关数据。