flutter stories editor #

This is a package created in the style of the instagram story creator, with which you can create images with images, texts, stickers (Gifs), finger drawing. They can be exported as an image to the gallery or shared directly to social networks.

Features #

[✔️] Draggable image

[✔️] Draggable text

[✔️] Draggable Gif/Sticker (giphy API)

[✔️] Gradiente container background

[✔️] Finger painting (normal/translucent/neon)

[✔️] Custom colors, gradints and font families

[✔️] Custom gallery picker (own package => gallery_media_picker)

[✔️] Save draft as image

[✔️] Get draft local uri

Future features #

[❌] Save draft as a gif

[❌] Color filters

[❌] Text animations

Demo #

Demo Gif video

Installation #

This package has only tested in Android and some features in web Add stories_editor: 0.1.5 to your pubspec.yaml dependencies and then import it.

import 'package:stories_editor/stories_editor.dart';

How to use #

add uses-permission AndroidMAnifest.xml file

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
     android:maxSdkVersion="31" />
 <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.VIBRATE"/>

Create a StoriesEditor() widget with the follow params:

StoriesEditor(
    giphyKey: '[YOUR GIPHY API KEY]', /// (String) required param
     onDone: (String uri){
      /// uri is the local path of final render Uint8List
      /// here your code
     },
    colorList: [] /// (List<Color>[]) optional param 
    gradientColors: [] /// (List<List<Color>>[]) optional param 
    middleBottomWidget: Container() /// (Widget) optional param, you can add your own logo or text in the bottom tool
    fontFamilyList: [] /// (List<String>) optional param
    isCustomFontList: '' /// (bool) if you use a own font list set value to "true"
);

Example #

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:share_plus/share_plus.dart';
import 'package:stories_editor/stories_editor.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter stories editor Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);



  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        resizeToAvoidBottomInset: false,
        body: Center(
          child: ElevatedButton(
            onPressed: (){
              Navigator.push(context, MaterialPageRoute(builder: (context) => StoriesEditor(
                giphyKey: '[HERE YOUR API KEY]',
                //fontFamilyList: ['Shizuru'],
                //isCustomFontList: true,
                onDone: (uri){
                  debugPrint(uri);
                  Share.shareFiles([uri]);
                },
              ))
              );
            },
            child: const Text('Open Stories Editor'),
          ),
        )
    );
  }
}