flutter_stories_editor

Description:

flutter stories editor

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>
copied to clipboard
Usage #

Add the plugin to your pubspec.yaml file:

dependencies:
flutter_stories_editor: ^0.0.1
copied to clipboard

Import the plugin in your Dart code:

import 'package:flutter_stories_editor/flutter_stories_editor.dart';
copied to clipboard

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) {},
);
copied to clipboard
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);
copied to clipboard
To Show stories use FlutterStoriesViewer widget #
FlutterStoriesViewer(
storyModel: storyModel,
backgroundColor: Colors.pink,
)
copied to clipboard
Screenshots / Demo #
Editor #




Viewer #