Flutter Instagram stories example

Nowadays Instagram like stories widely uses in apps for displaying news, educational content, and for interactions with users.

I created a new package that allows implementing full story functionality with only 2–3 lines of code.

Thanks for the Flutter open community, I found out a nice plugin story_view (additional thanks for the creator of this plugin) and, based on this plugin, created a new one with grouped stories and some new features.

The new package flutter_instagram_stories is on active development and you can ask feature requests or add an issue on Github.

Create an app with stories

For the date of publication, the package works only with the Firebase (Firestore) database. In case it will be needed I will implement data receiving from any API.

1. add the package to your app

dependencies:
  flutter_instagram_stories: ^0.0.1+1

2. Now in your Dart code, you can use

import 'package:flutter_instagram_stories/flutter_instagram_stories.dart';

3. Add Firebase database to your app

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

4. Create a Firestore database with data

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

Collection structure. It MUST be the same because this data uses for models inside the plugin.

DateTime date;
    List file[
        String filetype;
        String url;
        ]
    String title;
    String previewImage;

The full details are in the image below. You can use any URLs for images, video files, gifs.

That’s it! Now your app has Instagram stories with caching and other powerful features.

• Full working example with the open database you can find here.
• Package flutter_instagram_stories