flutter_stories_editor 0.0.1 flutter_stories_editor: ^0.0.1 copied to clipboard
Flutter stories editor
Stories Editor / Viewer #
Stories Editor / Viewer Package for Flutter
Getting Started #
This plugin displays a gallery with user's Albums and Photos with ability to take photo and video.
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 #