flutter_instagram_stories

a flutter plugin for displaying stories just like whatsapp & instagram. built-in groups (multiple stories with one icon), cache, video, gifs.

plugin can be used in any app for displaying news, educational content and etc. look the sample app here.

note: this plugin is under active development, and there are some known bugs and a lot of features to implement. please, add issues or feature requests here: issue

the project was initially copied from https://github.com/blackmann/story_view – great thanks for this nice package. in case you more flexible functionality you can check the original project.

important notes:

1. for now plugin works with firebase only.
2. this is first beta version, please add all issues and feature requests here: issue

features

• only one line of code to implement this plugin to app.
• display images, gifs, videos.
• adjustable titles on icons.
• preliminary caching after app started.
• multilanguage support.
• callback when user closed stories – helps to implement subscriptions after first launch and etc.

installing

look how install here https://pub.dev/packages/flutter_instagram_stories#-installing-tab-

now in your dart code, you can use:

import 'package:flutter_instagram_stories/flutter_instagram_stories.dart';

ios

for playing video plugin uses official video_player https://pub.dev/packages/video_player

from documentation:

1. warning: the video_player plugin doesn’t work on ios simulators. you must test videos on real ios devices.
2. for ios, add the following to the info.plist file found at <project root>/ios/runner/info.plist.

nsapptransportsecurity

nsallowsarbitraryloads

usage

you can find complete working example here https://github.com/awaik/flutter_instagram_stories/tree/master/example

dart code

connect to collection where you keep stories

    static string collectiondbname = 'instagram_stories_db';
    collectionreference dbinstance =
      firestore.instance.collection(collectiondbname);

and add stories full functionality to your app.

    flutterinstagramstories(
        collectiondbname: collectiondbname,
        showtitleonicon: true,
        backfromstories: () {
          _backfromstoriesalert();
        },
        icontextstyle: textstyle(
          fontsize: 14.0,
          color: colors.white,
        ),
        iconimageborderradius: borderradius.circular(15.0),
        iconboxdecoration: boxdecoration(
          borderradius: borderradius.all(radius.circular(15.0)),
          color: color(0xffffffff),
          boxshadow: [
            boxshadow(
              color: color(0xff333333),
              blurradius: 10.0,
              offset: offset(
                0.0,
                4.0,
              ),
            ),
          ],
        ),
        iconwidth: 150.0,
        iconheight: 150.0,
        textiniconpadding:
            edgeinsets.only(left: 8.0, right: 8.0, bottom: 12.0),
        //how long story lasts in seconds
        imagestoryduration: 7,
        progressposition: progressposition.top,
        repeat: true,
        inline: false,
        languagecode: 'en',
        closebuttonicon: icon(
          icons.close,
          color: colors.bluegrey,
          size: 28.0,
        ),
        closebuttonbackgroundcolor: color(0x00ffffff),
      ),

firestore database

plugin works with firestore database and package https://pub.dev/packages/cloud_firestore already included into plugin.

you can use example with sample database in example folder or create your own database.

steps to create:

1. add firebase to your app

• android https://firebase.google.com/docs/flutter/setup?platform=android
• ios https://firebase.google.com/docs/flutter/setup?platform=ios

2. create firestore database

• create collection with any name. after you will use this name in dart code only once.
• create documents inside collection with exact structure, like on image below

    datetime date;
    list file
       // for example
       // [{string filetype, string url}
       //  {string filetype, string url}
       //  ...]
    string previewimage;
    map previewtitle
       // for example
       // {"en": sometext, "anylangcode": sometext}

that’s it! now your app has instagram stories with caching and other powerful features.

use cases in the real apps

app for android and ios – https://lifext.app/