complete story view for Flutter

A lightweight and customizable Flutter package for creating Instagram‑like story views. This package provides widgets to display multiple stories with built‑in progress bars, automatic transitions, and support for images and videos.


Screenshot_1765699096 Screenshot_1765699040 Screenshot_1765699055

✨ Features

  • Display a list of story groups
  • Each group contains multiple story items
  • Supports image URLs (video support can be added similarly)
  • Built‑in progress indicator for each story
  • Fully customizable UI components

🚀 Usage

Import the package:

import 'package:complete_story_view/story_package.dart';

Use the StoryListWidget to display multiple story groups:

StoryListWidget(
  storyViewList: [
    StoryView(
      progressBarHeight: 8.0,
      storyChildren: [
        StoryWidget(url: "https://picsum.photos/id/237/536/354.jpg"),
        StoryWidget(
          url:
              "https://www.shutterstock.com/image-photo/demo-text-message-magnifying-glass-600nw-2491336635.jpg",
        ),
        // StoryWidget(
        //   url:
        //       "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        // ),
      ],
    ),
    StoryView(
      progressBarHeight: 8.0,
      storyChildren: [
        StoryWidget(
          url:
              "https://www.shutterstock.com/image-photo/demo-text-message-magnifying-glass-600nw-2491336635.jpg",
        ),
        StoryWidget(url: "https://picsum.photos/id/237/536/354.jpg"),
      ],
    ),
  ],
)

📁 Widgets Overview

StoryListWidget

A horizontal scrollable list of story groups.

Properties:

  • storyViewList: List of story groups (StoryView).

StoryView

Represents a single story group with multiple items.

Properties:

  • storyChildren: List of stories (StoryWidget).
  • progressBarHeight: Height of the progress indicator.

StoryWidget

A single story item — currently supports images.

Properties:

  • url: Image or video URL.

🎨 Customization

You can extend or modify the widgets to:

  • Add video playback
  • Change animation speed
  • Customize progress bar appearance
  • Add gestures (long press, swipe, pause, etc.)

📝 Notes

  • Network images require proper permissions on Android & iOS.
  • Video support is commented in your example but can be enabled by integrating a video player.

🤝 Contributing

Pull requests are welcome! If you’d like to report bugs or request features, open an issue in the repository.


📄 License

MIT License © 2025