flutter_instagram_stories 0.1.3+4

  • Readme
  • Changelog
  • Example
  • Installing
  • 88

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

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

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
  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 - https://lifext.app/

Lifext app

0.1.3+4 #

0.1.3+3 #

  • Update dependencies and read.me

0.1.3+2 #

  • Fix some minor bugs.

0.1.3+1 #

  • Move close button a little bit.

0.1.3 #

  • Add option bool sortingOrderDesc;
  • Add options for highlighting last stories
    lastIconHighlight: true,
    lastIconHighlightColor: Colors.deepOrange,
    lastIconHighlightRadius: const Radius.circular(15.0),

0.1.2 #

  • Add VoidCallback backFromStories. This create event when user closed stories screen. Find details in the example.
  • Add option for styling close button. Find details in the example.
    /// stories close button style
    Icon closeButtonIcon;
    Color closeButtonBackgroundColor;
  • Add option for background color during stories listing backgroundColorBetweenStories: Colors.black,

0.1.1 #

  • BREAKING CHANGE. Add multilanguage support for images inside story, database structure have changed

0.1.0+3 #

  • Add option textInIconPadding
  • Improved preview skeleton during loading

0.1.0+2 #

  • Fixed bug with stories listing.
  • Improved README.MD

0.1.0+1 #

  • Fixed bug with stories opening.
  • Improved README.MD

0.1.0 #

  • BREAKING CHANGE.
    1. Added multilanguage support for preview images title.
    2. For future changes, added multilanguage fields to stories.
  • Add option iconImageBorderRadius - set roundness of the preview images
  • Add option iconBoxDecoration - set style of the preview images
  • Change example
  • Change documentation

0.0.1+1 #

  • Fixed bug when Stories placed inside column
  • Improved example

0.0.1 #

  • Initial Release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter_instagram_stories/flutter_instagram_stories.dart';
import 'style.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        //TODO: implement dark mode switcher and adapt plugin for dark mode
        theme: Themes.lightTheme,
        darkTheme: Themes.darkTheme,
        home: Home());
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  static String collectionDbName = 'instagram_stories_db';

  //TODO: add possibility get data from any API
  CollectionReference dbInstance =
      Firestore.instance.collection(collectionDbName);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter instagram stories"),
      ),
      body: Column(
        children: <Widget>[
          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',
            backgroundColorBetweenStories: Colors.black,
            closeButtonIcon: Icon(
              Icons.close,
              color: Colors.white,
              size: 28.0,
            ),
            closeButtonBackgroundColor: Color(0x11000000),
            sortingOrderDesc: true,
            lastIconHighlight: true,
            lastIconHighlightColor: Colors.deepOrange,
            lastIconHighlightRadius: const Radius.circular(15.0),
          ),
          Center(
            child: Padding(
              padding: EdgeInsets.all(20.0),
              child: Text(
                "App's functuonality",
                style: TextStyle(
                  fontSize: 26,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  _backFromStoriesAlert() {
    showDialog(
      context: context,
      child: SimpleDialog(
        title: Text(
          "User have looked stories and closed them.",
          style: TextStyle(fontWeight: FontWeight.normal, fontSize: 18.0),
        ),
        children: <Widget>[
          SimpleDialogOption(
            child: Text("Dismiss"),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_instagram_stories: ^0.1.3+4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_instagram_stories/flutter_instagram_stories.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
77
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
88
Learn more about scoring.

We analyzed this package on May 30, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health suggestions

Format lib/generated/i18n.dart.

Run flutter format to format lib/generated/i18n.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
cached_network_image ^2.2.0+1 2.2.0+1 2.3.0-beta.1+1
cloud_firestore ^0.13.5 0.13.6
dotted_border ^1.0.5 1.0.5
firebase_core ^0.4.4+3 0.4.5
flutter 0.0.0
flutter_cache_manager ^1.2.2 1.3.0
json_annotation ^3.0.1 3.0.1
rxdart ^0.24.0 0.24.1
skeleton_text ^1.0.0 1.0.0
video_player ^0.10.10 0.10.11+1
Transitive dependencies
charcode 1.1.3
clock 1.0.1
cloud_firestore_platform_interface 1.1.2
cloud_firestore_web 0.1.1+2
collection 1.14.12
convert 2.1.1
crypto 2.1.5
file 5.1.0
firebase 7.3.0
firebase_core_platform_interface 1.0.4
firebase_core_web 0.1.1+2
flutter_web_plugins 0.0.0
http 0.12.1
http_parser 3.1.4
intl 0.16.1
js 0.6.1+1
matcher 0.12.6
meta 1.1.8
path 1.7.0
path_drawing 0.4.1
path_parsing 0.1.4
path_provider 1.6.9
path_provider_macos 0.0.4+3
path_provider_platform_interface 1.0.2
pedantic 1.9.0
platform 2.2.1
plugin_platform_interface 1.0.2
quiver 2.1.3
sky_engine 0.0.99
source_span 1.7.0
sqflite 1.3.0+2
sqflite_common 1.0.1
stack_trace 1.9.3
string_scanner 1.0.5
synchronized 2.2.0
term_glyph 1.1.0
typed_data 1.1.6
uuid 2.0.4
vector_math 2.0.8
video_player_platform_interface 2.0.2
video_player_web 0.1.3+1
Dev dependencies
build_runner ^1.9.0
json_serializable ^3.3.0
test ^1.14.3