Stories editor - A package created in the style of the instagram story creator, with which you can create images with images, texts, stickers (Gifs)

Overview

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.

Demo

Demo Gif video

Installation

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

import 'package:stories_editor/stories_editor.dart';

How to use

  1. 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"/>
  2. add MultiProvider in your runApp() as bellow:
void main() {
  runApp(
    MultiProvider(
      providers: StoriesEditorProvider().providers, /// is required to use it
      child: const MyApp(),
    )
  );
}
  1. Create a StoriesEditor() widget, and pass the 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
    fontList: [] /// (List<String>) optional param
    fontPackage: '' /// (String) if you use a own font list is required add your name app package
);

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(
    MultiProvider(
      providers: StoriesEditorProvider().providers,
      child: 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: Container(
          child: Center(
            child: ElevatedButton(
              onPressed: (){
                Navigator.push(context, MaterialPageRoute(builder: (context) => StoriesEditor(
                  giphyKey: '[YOUR GIPHY API KEY]',
                  onDone: (uri){
                    print(uri);
                    if(uri != null){
                      Share.shareFiles([uri]);
                    }
                  },
                ))
                );
              },
              child: const Text('Open Stories Editor'),
            ),
          ),
        )
    );
  }
}

ScreenShots

initial view

Custom image picker made with Photo_manager package

Gradient background taking image color pixel

Exit Dialog

Custom Gif Picker made with a fork of Giphy_picker package

Custom finger Drawing made with perfect_freehand package

Text Editor

All features together

Share to social networks made with share_plus package

Saved image

You might also like...

A pattern editor, in the "style" of a Tracker, for the Korg Electribe 2's (synth, sampler, hacktribe).

A pattern editor, in the

elfer A pattern editor, in the "style" of a Tracker, for the Korg Electribe 2's (synth, sampler, hacktribe). Status This is very much a WORK-IN-PROGRE

Dec 5, 2022

A flutter package which will help you to create a draggable widget that can be dragged around the screen.

A flutter package which will help you to create a draggable widget that can be dragged around the screen.

A flutter package which will help you to create a draggable widget that can be dragged around the screen. Demo Features 💚 Manually Control the positi

Aug 10, 2022

Neumorphic style - Example app with Flutter that displays a neumorphic style container

Neumorphic style - Example app with Flutter that displays a neumorphic style container

Flutter Neumorphic Style Example App Example app with Flutter that displays a ne

Mar 24, 2022

Instagram-clone - Instagram clone built using flutter and Firebase

Instagram-clone - Instagram clone built using flutter and Firebase

Instagram-clone statistics of Firebase usage User Authentication for Instagram l

Jul 18, 2022

Imagepickerweb - A picker with which you can pick images and videos from your Flutter web app

Imagepickerweb - A picker with which you can pick images and videos from your Flutter web app

ImagePickerWeb This Web-Plugin allows Flutter Web to pick images (as File, Widget or Uint8List) and videos (as File or Uint8List). Many thanks goes to

Sep 26, 2022

Story app UI in Flutter!

Stories App UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Dec 6, 2022

News App developed with Flutter featuring beautiful UI, category-based news, story for faster news reading, inbuilt article viewer, share feature, and more.

News App developed with Flutter featuring beautiful UI, category-based news, story for faster news reading, inbuilt article viewer, share feature, and more.

Ariel News App developed with Flutter featuring beautiful UI, category-based news, story for faster news reading, inbuilt article viewer, share featur

Nov 9, 2022

DostiPak - Dating app to make connection between people and start new love story to lovers

DostiPak - Dating app to make connection between people and start new love story to lovers

Dosti Pak Dating app to make connection between people and start new love story

Oct 2, 2022

An advanced story viewer for Flutter. Quite easy & Quite advanced

An advanced story viewer for Flutter. Quite easy & Quite advanced

AdvStory 📸 Quite simple & Quite advanced 🚀 Advanced Story viewer for Flutter. Supports image, video and custom stories. Full control over stories fo

Nov 18, 2022
Comments
  • suggestion : make giphy an optional feature

    suggestion : make giphy an optional feature

    Everyone may not want giphy feature in an image editor, or this package should be able to use without it, so it would be good if this is made an optional feature, in addition to existing features

    opened by sivaprasadnk 0
Owner
camilo velandia
camilo velandia
Stories like in Instagram, each story can include multiple images and videos. Package supports video, titles, preliminary caching.

flutter_instagram_stories A Flutter package for displaying stories just like Whatsapp & Instagram. Built-in groups (multiple stories with one icon), c

Alex Awaik 125 Dec 9, 2022
Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.

dismissible_page ?? ?? Creates page that is dismissed by swipe gestures, with Hero style animations, Inspired by FB, IG stories. Live Demo Contents Su

Tornike 76 Dec 22, 2022
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Mehdi Zarepour 68 Dec 16, 2022
Car rental app created by Jakub Sobański and Martin Gogołowicz (creator of UI)

Flutter Car Rental App with darkmode support Flutter 2.8.1 Null Safety Car rental app created by Jakub Sobański and Martin Gogołowicz (creator of UI).

Jakub Sobański 21 Dec 30, 2022
An app that helps you manage your Postcard Creator orders. Built with Flutter

mailman A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Dario Breitenstein 0 Jan 10, 2022
A lightweight flutter package to linkify texts containing urls, emails and hashtags

linkfy_text A lightweight flutter package to linkify texts containing urls, emails and hashtags. Usage To use this package, add linkfy_text as a depen

Stanley Akpama 14 Nov 23, 2022
A simple way to share Instagram stories as an embedded feature within the Flutter application

Loopi Share A simple way to share Instagram stories as an embedded feature within the Flutter application. Introduction Words on both platforms Androi

Loopi 5 Sep 24, 2022
Create bulk instagram quotes posts with custom background, style, font, size. built using flutter

Mini Canva minicanva.com Bulk Image Generator from given list of quotes, lines ?? Purpose Etsy is an E-commerce platform where we can sell digital goo

Ashish Pipaliya 7 Oct 29, 2022
Iosish indicator - 🍎 Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Iosish indicator - ?? Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Kim Seung Hwan 2 Apr 1, 2022
Json editor - A json editor on flutter

Features Support add comment; Support show errors for invalid json text; Pretty

Chan Young 12 Nov 18, 2022