flutter_story_view

WhatsApp story view package, for apps with stories like Whatsapp and Instagram.

This a Flutter widget to display stories like Whatsapp and Instagram. This can also be used inside ListView or Column. This package provide gestures like to pause, forward and go to previous story page.

Features

🌄 Image, and video support (assets and url) both.

📍 Gesture for pause, forward and reverse page.

🌈 Animated progress indicator for each story item

🏵️ Caption for story.

Installation

To use this plugin, add flutter_story_view as a dependency in your pubspec.yaml file.

Usage

Import the package into your code

import "package:flutter_story_view/flutter_story_view.dart";

Look inside examples/example.dart on how to use this library. You can copy and paste the code into your main.dart and run to have a quick look.

Basics

Use FlutterStoryView to add stories in your Flutter App. FlutterStoryView class requires List<StoryItem> and each story item has some fields like url, duration, and type and so on. So having these, you can handily customize each single story the way you want.

Keep in mind : The type must be specified with each StoryItem. You can access the type String from the class StoryItemType which comes built-in with this package.
StoryItem Image :

final itemImage = StoryItem(
    url: "your image url/asset goes here",
    type: StoryItemType.image,
    viewers: [],
    duration: 3 // for image if duration was null it will be 3 by default.
);

StoryItem Video :

final itemImage = StoryItem(
    url: "your video url/asset goes here",
    type: StoryItemType.video,
    viewers: [],
    duration: 10 // for video the duration would be 30 seconds if video duration gets longer than 30 seconds.
);

For more information : visit example project inside example/example.dart.

Additional information

This package will be improved more along the time, if you found any issue create the issue, also if you want to contribute feel free to do. I'll review your code and merge it if found useful. Thanks

Contributors

@berkaycatak

Created & Maintained By

@MuhammadAdnan, Youtube : @eTechViral, LinkedIn : @MuhammadAdnan , Instagram : @MuhammadAdnan, LinkedIn : @eTechViral, Instagram : @eTechViral