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"/>

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>

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,)),
          ),

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.

TchatchoKemajou / custom_story_editor

readme