custom_story_editor

Description:

custom story editor

custom_story_editor (https://pub.dev/packages/custom_story_editor) #
This package is created using style of the WhatsApp story image/video editor, with which you can edit images and videos both together. You can add texts, stickers, freehand finger drawing, apply filter, and undo. The edited images will be returned in a onSave call back as List of Files. You can then upload it to some storage or save it locally to your gallery.


Video editing for now only support trimming. In future more video editing features will be added.


Features #
✅ You can edit Images, and videos both together.
✅ Draggable fancy text with (custom colors, font families, and resize)
✖️ Draggable stickers & emojis
✅ Apply filters to images
✅ Freehand drawing over images
✅ Trimming video frames
Future features #
🚀 Drawing painting over video frames (requires platform specific work)
🚀 More image and video editing functionality like (WhatsApp & Instagram) stories
🚀 improve and enhance performance and existing features.
Package Demo #





Installation #
Add custom_story_editor: latest_version to your pubspec.yaml and then import it.
dartimport 'package:custom_story_editor/custom_story_editor.dart';
Android #
add the following code to your AndroidMAnifest.xml file
<activity
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
copied to clipboard
iOS #
add the following code to your info.plist file
<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>
copied to clipboard
How to use #
// Inialize controllers within the state
CustomStoryEditorController controller = CustomStoryEditorController();
final TextEditingController _captionController = TextEditingController();

// TODO: create a method to pick files (videos and images) either separate or together.


// Select files
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) {
// Here you go with your edited files.
}
);
},
);
}
},
);
}, icon: const Icon(Icons.upload, size: 50,)),
),
copied to clipboard
Screenshots #
Initial view & Multiple images selected




Images & videos together & Apply filters




Crop, scale and rotate & Add draggable stickers




Draw freehand painting over images




Must read #
The initial release of custom_story_editor may have small bugs, and issues. If you found some, and you're willing to contribute feel free to create issue and rasie a PR. Make sure you inform me through my LinkedIn DM for the issues you create in both cases either or not if you want to contribute.
Created & Maintained By #
@EmpereurTech, LinkedIn : @EmpereurTech.