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.
- Android: Android config preparation.
- iOS: iOS config preparation.
- macOS: Pretty much the same with iOS.
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
- Add the plugin to your
pubspec.yaml
file:
dependencies:
flutter_stories_editor: ^0.0.1
- Import the plugin in your Dart code:
import 'package:flutter_stories_editor/flutter_stories_editor.dart';
- 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
Viewer
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_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/video_image_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