flutter_instagram_stories Pub

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.

Note: This plugin is under ative development, and there are some known bugs and a lot of features to implement. Please, add issues or feature requests here: issue

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

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
  • Mutilanguage support

Installing

dependencies:
  flutter_instagram_stories: ^0.1.1

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 /ios/Runner/Info.plist.

    NSAppTransportSecurity NSAllowsArbitraryLoads <true/>

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,
      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,
      //how long story lasts in seconds
      imageStoryDuration: 7,
      progressPosition: ProgressPosition.top,
      repeat: true,
      inline: false,
      languageCode: 'en',
    ),

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

Libraries

flutter_instagram_stories
grouped_stories_view
i18n
settings
stories
stories_data
stories_list_skeleton
stories_list_with_pressed
story_controller
story_data
story_image
story_video
story_view
utils