Platform Pub Package Build Status
Codecov Coverage License: MIT

Stories Editor / Viewer

Stories Editor / Viewer Package for Flutter

Getting Started

This plugin allows you to create a story editor and viewer in your Flutter app. Here is a detailed description of its features and functions:

Main Features: Story Editor:

Creating Stories: Allows users to create new stories, adding text, images, videos, and other elements. Editing Existing Stories: Enables users to edit previously created stories, change text, replace or add new media files. Interactive Elements: Includes the ability to add interactive elements such as polls, questions, and links. Preview: Users can see how their story will look before publishing. Story Viewer:

Viewing Stories: Allows users to view stories created by other users or the administrator.

Prepare for use

Configure native platforms

Minimum platform versions: Android 16, iOS 9.0, macOS 10.15.

iOS config preparation

Define the NSPhotoLibraryUsageDescription , NSCameraUsageDescription and NSMicrophoneUsageDescription key-value in the 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>

Usage

  1. Add the plugin to your pubspec.yaml file:
dependencies:
  flutter_stories_editor: ^0.0.1
  1. Import the plugin in your Dart code:
import 'package:flutter_stories_editor/flutter_stories_editor.dart';
  1. Use the plugin in your Dart code:
 final EditorController editorController = EditorController();
... 
FlutterStoriesEditor(
backgroundColor: Colors.pink,
controller: editorController,
topBar: const Text('Top bar'),
onDone: (StoryModel story) {},
onClose: (StoryModel story) {},
);

EditorController methods

/// Open assets picker
Future<void> addImage(BuildContext context);
/// Add text element to the editor
void addText();
/// Complete editing and return the story model
StoryModel complete({String? id});
/// Toggle filter selector
void toggleFilter();
/// Edit text element
void editText(StoryElement storyElement);
/// Add Custom file widget asset
void addCustomAsset({
  XFile? file,
  String? url,
  required CustomAssetType type,
});
/// Add custom widget to assets
void addCustomWidgetAsset(Widget widget);

To Show stories use FlutterStoriesViewer widget

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

Screenshots / Demo

Editor

editor_1.png editor_2.png editor_3.png editor_4.png

Viewer

viewer_1.png

ko-fi

Libraries

constants
flutter_stories_editor
flutter_stories_view
models/editor_controller
models/item_type_enum
models/story_element
models/story_model
models/ui_settings
ui/actions_bar_widget
ui/editor_view
ui/lines_widget
ui/remove_bin_widget
ui/widgets/audio/audio_overlay
ui/widgets/audio_asset
ui/widgets/base_icon_button
ui/widgets/base_story_element
ui/widgets/filters/filters_selector
ui/widgets/image_asset
ui/widgets/image_widget
ui/widgets/loading/loading_overlay
ui/widgets/story_element
ui/widgets/text/text_asset
ui/widgets/text/text_color_selector
ui/widgets/text/text_font_selector
ui/widgets/text/text_overlay
ui/widgets/video/actions_bar
ui/widgets/video/top_bar
ui/widgets/video/trim_slider
ui/widgets/video/video_overlay
ui/widgets/video_asset
ui/widgets/widget_asset
utils/audio_trimmer/trim/audio_trim_slider
utils/audio_trimmer/trimmer
utils/audio_trimmer/utils/duration_style
utils/audio_trimmer/utils/editor_drag_type
utils/audio_trimmer/utils/file_formats
utils/audio_trimmer/utils/storage_dir
utils/box_size_util
utils/color_filters/addons
utils/color_filters/colorfilter_generator
utils/color_filters/presets
utils/compress_service
utils/extensions
utils/gesture_util
utils/overlay_util
utils/palette_generator_util
utils/video_editor/lib/domain/bloc/controller
utils/video_editor/lib/domain/entities/cover_data
utils/video_editor/lib/domain/entities/crop_style
utils/video_editor/lib/domain/entities/ffmpeg_config
utils/video_editor/lib/domain/entities/file_format
utils/video_editor/lib/domain/entities/transform_data
utils/video_editor/lib/domain/entities/trim_style
utils/video_editor/lib/domain/helpers
utils/video_editor/lib/domain/thumbnails
utils/video_editor/lib/ui/crop/crop_grid
utils/video_editor/lib/ui/crop/crop_grid_painter
utils/video_editor/lib/ui/crop/crop_mixin
utils/video_editor/lib/ui/image_viewer
utils/video_editor/lib/ui/transform
utils/video_editor/lib/ui/trim/thumbnail_slider
utils/video_editor/lib/ui/trim/trim_slider
utils/video_editor/lib/ui/trim/trim_slider_painter
utils/video_editor/lib/ui/video_viewer
utils/video_utils