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

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

Stories Editor / Viewer

Stories Editor / Viewer Package for Flutter

Getting Started

Prepare for use

Configure native platforms

iOS config preparation

Usage

EditorController methods

To Show stories use FlutterStoriesViewer widget

Screenshots / Demo

Editor

Viewer

Libraries

flutter_stories_editor package