Stories like in Instagram written in Flutter


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 - great thanks for this nice package. In case you more flexible functionality you can check the original project.

Showcase|100x100, 10%

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


  • 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.


Look how install here

Now in your Dart code, you can use:

import 'package:flutter_instagram_stories/flutter_instagram_stories.dart';


For playing video plugin uses official 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 /ios/Runner/Info.plist.

    NSAppTransportSecurity NSAllowsArbitraryLoads


You can find complete working example here

Dart code

Connect to collection where you keep stories

    static String collectionDbName = 'instagram_stories_db';
    CollectionReference dbInstance =

And add stories full functionality to your app.

        collectionDbName: collectionDbName,
        showTitleOnIcon: true,
        backFromStories: () {
        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: [
              color: Color(0xff333333),
              blurRadius: 10.0,
              offset: Offset(
        iconWidth: 150.0,
        iconHeight: 150.0,
            EdgeInsets.only(left: 8.0, right: 8.0, bottom: 12.0),
        //how long story lasts in seconds
        imageStoryDuration: 7,
        repeat: true,
        inline: false,
        languageCode: 'en',
        closeButtonIcon: Icon(
          color: Colors.blueGrey,
          size: 28.0,
        closeButtonBackgroundColor: Color(0x00ffffff),

Firestore database

Plugin works with Firestore database and package 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
  1. 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}

Showcase|100x100, 10%

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 -

Lifext app

Download Details:

Author: awaik


#flutter #dart #mobile-apps

Stories like in Instagram written in Flutter
36.75 GEEK