StoryView Indicators for Flutter

A customizable and reusable Flutter widget that replicates the functionality of story indicators, similar to Instagram and Snapchat. The package provides animated progress bars for each story item with looping functionality and customizable animations.

Features

  • Story Indicators: Animated linear progress indicators.
  • Looping Stories: Automatically restarts from the first story after the last.
  • Customizable Duration: Control the duration of each story.
  • Easy Integration: Lightweight and easy to integrate into your Flutter app.
  • Event Callbacks: Provides hooks for story change and completion events.

Installation

Add the package to your pubspec.yaml file:

dependencies:
  story_view_carousel: ^0.0.1

Then, run the following command:

flutter pub get

Usage

Import the Package

import 'package:story_view_indicators/story_view_indicators.dart';

Example Implementation

Here is how to use the widget in your Flutter application:

import 'package:flutter/material.dart';
import 'package:story_view_indicators/story_view_indicators.dart';

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


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: StoryViewCarousel(
          items: [
            StoryItem(
              title: 'title',
              description: 'subTitle',
              image: 'assets/onboard_1.png',
            ),
           StoryItem(
              title: 'title',
              description: 'subTitle',
              image: 'assets/onboard_1.png',
            ), StoryItem(
              title: 'title',
              description: 'subTitle',
              image: 'assets/onboard_1.png',
            ),
          ],
        ),
      ),
    );
  }
}

API Reference

StoryViewIndicators

Properties

Property Type Description
totalIndicators int Total number of story items.
currentIndex int The current active story index.
durationPerStory Duration Duration of each story.
onStoryComplete VoidCallback Callback triggered when a story completes.
indicatorColor Color (optional) Color of the active progress bar.
backgroundColor Color (optional) Color of the inactive progress bars.

Customization

You can easily customize the appearance of the indicators using the following parameters:

  • indicatorColor: Change the color of the active story indicator.
  • backgroundColor: Customize the inactive indicator color.
  • durationPerStory: Adjust the playback duration for each story.

Contributing

We welcome contributions! Please follow these steps:

  1. Fork the repository.
  2. Create a new branch: git checkout -b feature/your-feature-name.
  3. Commit your changes: git commit -m 'Add new feature'.
  4. Push the changes: git push origin feature/your-feature-name.
  5. Create a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For support or inquiries:

Thank you for using StoryView Indicators! If you like it, don’t forget to star the repository! 🌟

story_view_carousel

Libraries

model/story_item
story_view_carousel