Story_View: Displaying Immersive Stories in Flutter Apps

Published on by Flutter News Hub

Story_View: Displaying Immersive Stories in Flutter Apps

Story_view is a library for Flutter developers seeking to incorporate immersive story experiences into their mobile applications. Inspired by popular social media platforms like Instagram and WhatsApp, this library provides a comprehensive set of widgets and features for creating engaging stories that captivate users.

Features

Story_view boasts an array of features that enhance the storytelling experience:

  • Versatile Media Support: Supports display of still images, GIFs, and videos, accommodating a wide range of content types.
  • Gesture Control: Enables users to pause, rewind, or advance the story using intuitive gestures.
  • Captions and Progress: Displays captions for each story item and provides an animated progress indicator to indicate the duration of each page.
  • Fullscreen or Inline: Supports both fullscreen and inline display modes, allowing for seamless integration within various app layouts.
  • Customizable Options: Offers customizable settings for controller, loaders, and GIF support, empowering developers to tailor the storytelling experience as desired.

Installation

To incorporate story_view into your Flutter project, add the following dependency to your pubspec.yaml file:

dependencies:
  story_view: ^latest_version

Usage

Importing the library into your code and utilizing the StoryView widget is the foundation for creating captivating stories:

import 'package:story_view/story_view.dart';

List storyItems = [
  StoryItem.text(...),
  StoryItem.inlineImage(...),
  StoryItem.pageImage(...),
  StoryItem.pageVideo(...),
];

final controller = StoryController();

@override
Widget build(context) {
  return StoryView(
    storyItems,
    controller: controller,
    repeat: true, // Optional: enable continuous story loop
    onStoryShow: (s) {}, // Optional: triggered when a new story is shown
    onComplete: () {}, // Optional: triggered when all stories are completed
    onVerticalSwipeComplete: (direction) {}, // Optional: triggered when user swipes vertically (disabled by default)
  );
}

Shorthand Methods for Story Content

Story_view provides convenient shorthand methods for creating specific types of story items:

  • StoryItem.text: Creates a story page displaying only text.
  • StoryItem.inlineImage: Generates a story item suitable for inline display within a linear view hierarchy (e.g., List or Column).
  • StoryItem.pageImage: Creates a story page with an image and an optional caption.
  • StoryItem.pageVideo: Generates a story page with a video, providing options for customization.

Controller for Loaders and GIFs

For optimal performance, story_view leverages a StoryController to handle loading and GIF animation. To pause stories during image loading, pass the same StoryController instance to each StoryItem.inlineImage or StoryItem.pageImage call.

final controller = StoryController();

List storyItems = [
  StoryItem.pageImage(..., controller: controller),
  StoryItem.pageImage(..., controller: controller),
  StoryItem.pageVideo(..., controller: controller),
];

Discover More

For comprehensive documentation and additional code examples, refer to the official story_view documentation: https://pub.dev/documentation/story_view/latest/

Flutter News Hub