Story for Flutter

A flutter plugin for creating story (like Instagram, WhatsApp, Telegram, Facebook, etc) for all platforms.

Features

• Widget support on story (Image, Video, Text, etc).
• Pause, play, next, previous and drag with touch and story controller.
• Creating custom footer (with message box or custom widget), like and forward buttons.
• Animated progress indicator for each story card.

To see example of the following Story on a device or simulator:

cd example/
flutter run --release

Demo

Source Link: example/lib/main.dart

Getting Started

1. Installation
2. Usage
3. Custom Usage
4. StoryUser Usage
5. StoryCard Usage
6. StoryCardFooter Usage
7. StoryCardMessageBox Usage
8. StoryCardLikeButton Usage
9. StoryCardForwardButton Usage
10. Story Controller
11. Story Builder

Installation

Add flutter_story as a dependency in your pubspec.yaml file:

dependencies:
  flutter_story: ^1.0.1

Import the plugin package to your dart code

import 'package:flutter_story/flutter_story.dart';

Usage

Simple usage

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Story(
        children: [
          StoryUser(
            avatar: Image.asset("assets/user_avatar.jpg"),
            label: const Text("UserName"),
            children: const [
              StoryCard(
                child: Center(
                  child: Text("This is the story card widget",
                    style: TextStyle(color: Colors.white),),
                ),
              )
            ],
          )
        ],
      ),
    ),
  );
}

Custom Usage

There are several options that allow for more control:

StoryUser Usage

Using the StoryUser

Manually change the StoryUser properties.

StoryCard Usage

Using the StoryCard

Manually change the StoryCard properties.

StoryCardFooter Usage

Using the StoryCardFooter

Manually change the StoryCardFooter properties.

StoryCard includes footer: StoryCardFooter

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Story(
        children: [
          StoryUser(
            avatar: Image.asset("assets/user_avatar.jpg"),
            label: const Text("UserName"),
            children: const [
              StoryCard(
                footer: StoryCardFooter(
                  child: Text(
                    "This is the story card footer widget",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                child: Center(
                  child: Text(
                    "This is the story card widget",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    ),
  );
}

StoryCardMessageBox Usage

Using the StoryCardMessageBox

Manually change the StoryCardMessageBox properties.

StoryCardFooter includes messageBox: StoryCardMessageBox

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Story(
        children: [
          StoryUser(
            avatar: Image.asset("assets/user_avatar.jpg"),
            label: const Text("UserName"),
            children: const [
              StoryCard(
                footer: StoryCardFooter(
                  messageBox: StoryCardMessageBox(),
                  likeButton: StoryCardLikeButton(),
                  forwardButton: StoryCardForwardButton(),
                ),
                child: Center(
                  child: Text(
                    "This is the story card widget",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    ),
  );
}

StoryCardMessageBox emojis

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Story(
        children: [
          StoryUser(
            avatar: Image.asset("assets/user_avatar.jpg"),
            label: const Text("UserName"),
            children: [
              StoryCard(
                footer: StoryCardFooter(
                  messageBox: StoryCardMessageBox(
                    child: Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          MaterialButton(
                            shape: const CircleBorder(),
                            child: const Text(
                              "😂",
                              style: TextStyle(fontSize: 32),
                            ),
                            onPressed: () {},
                          ),
                          const SizedBox(width: 10),
                          MaterialButton(
                            shape: const CircleBorder(),
                            child: const Text(
                              "😂",
                              style: TextStyle(fontSize: 32),
                            ),
                            onPressed: () {},
                          ),
                          const SizedBox(width: 10),
                          MaterialButton(
                            shape: const CircleBorder(),
                            child: const Text(
                              "😂",
                              style: TextStyle(fontSize: 32),
                            ),
                            onPressed: () {},
                          ),
                        ],
                      ),
                    ),
                  ),
                  likeButton: StoryCardLikeButton(),
                  forwardButton: StoryCardForwardButton(),
                ),
                child: const Center(
                  child: Text(
                    "This is the story card widget",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    ),
  );
}

StoryCardLikeButton Usage

Using the StoryCardLikeButton

Manually change the StoryCardLikeButton properties.

StoryCardFooter includes likeButton: StoryCardLikeButton

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Story(
        children: [
          StoryUser(
            avatar: Image.asset("assets/user_avatar.jpg"),
            label: const Text("UserName"),
            children: const [
              StoryCard(
                footer: StoryCardFooter(
                  likeButton: StoryCardLikeButton(),
                  child: Text(
                    "This is the story card footer widget",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                child: Center(
                  child: Text(
                    "This is the story card widget",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    ),
  );
}

StoryCardForwardButton Usage

Using the StoryCardForwardButton

Manually change the StoryCardForwardButton properties.

StoryCardFooter includes forwardButton: StoryCardForwardButton

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Story(
        children: [
          StoryUser(
            avatar: Image.asset("assets/user_avatar.jpg"),
            label: const Text("UserName"),
            children: const [
              StoryCard(
                footer: StoryCardFooter(
                  likeButton: StoryCardLikeButton(),
                  forwardButton: StoryCardForwardButton(),
                  child: Text(
                    "This is the story card footer widget",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                child: Center(
                  child: Text(
                    "This is the story card widget",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    ),
  );
}

StoryController

Using the StoryController

Manually change the Story state. For better performance, use a StoryController as controller (recommended).

StoryController storyController = StoryController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Story(
            controller: storyController,
            children: [
              StoryUser(
                userId: 1,
                avatar: Image.asset("assets/user_avatar.jpg"),
                label: const Text("UserName"),
                children: [
                  StoryCard(
                    childOverlay: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          ElevatedButton(
                            onPressed: () => storyController.pauseStory(),
                            child: const Text("Pause"),
                          ),
                          ElevatedButton(
                            onPressed: () => storyController.playStory(),
                            child: const Text("Play"),
                          ),
                          ElevatedButton(
                            onPressed: () =>
                                storyController.setStoryCardVisited(
                                    storyIndex: 0,
                                    cardIndex: 0,
                                    visited: true),
                            child: const Text("Set story card visited"),
                          ),
                          ElevatedButton(
                            onPressed: () =>
                                storyController.setStoryCardVisitedByUserId(
                                    userId: 1, cardIndex: 0, visited: true),
                            child: const Text(
                                "Set story card visited by user id"),
                          ),
                          ElevatedButton(
                            onPressed: () => storyController.closeStory(),
                            child: const Text("Close"),
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              )
            ],
          ),
          Center(
            child: Column(
              children: [
                ElevatedButton(
                  onPressed: () => storyController.openStory(context,
                      storyIndex: 0, cardIndex: 0),
                  child: const Text("Open story"),
                ),
                ElevatedButton(
                  onPressed: () => storyController.openStoryByUserId(context,
                      userId: 1, cardIndex: 0),
                  child: const Text("Open story by user id"),
                ),
              ],
            ),
          )
        ],
      ),
    ),
  );
}

StoryBuilder

Using the Story.builder

see example/lib/main.dart

StoryController storyController = StoryController();
late List<StoryModel> stories;

@override
void initState() {
  super.initState();
  stories = getStories();
}

@override
void dispose() {
  super.dispose();
  storyController.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Story.builder(
          controller: storyController,
          itemCount: stories.length,
          itemBuilder: (context, index) {
            return StoryUser(
              avatar: stories[index].avatar,
              label: stories[index].label,
              children: stories[index].cards == null
                  ? []
                  : stories[index].cards!.map((card) =>
                  StoryCard(
                    color: card.color,
                    cardDuration: card.duration,
                    childOverlay: card.childOverlay,
                    visited: card.visited,
                    onVisited: (cardIndex) {
                      setState(() {
                        card.visited = true;
                      });
                    },
                    child: card.child,
                  )).toList(),
            );
          }),
    ),
  );
}

List<StoryModel> getStories() {
  return [
    StoryModel(
        avatar: Image.asset("assets/user_avatar.jpg"),
        label: const Text("UserName"),
        cards: [
          StoryCardModel(
            child: const Center(
              child: Text(
                "This is the story card widget",
                style: TextStyle(color: Colors.white),
              ),
            ),
          )
        ]
    ),
  ];
}

class StoryModel {
  StoryModel({
    this.userId,
    this.avatar,
    this.label,
    this.cards,
  });

  int? userId;
  Widget? avatar;
  Text? label;
  List<StoryCardModel>? cards;
}

class StoryCardModel {
  StoryCardModel({
    this.visited = false,
    this.duration = const Duration(seconds: 2),
    this.color = const Color(0xff333333),
    this.childOverlay,
    this.child,
  });

  bool visited;
  Duration duration;
  Color color;
  Widget? childOverlay;
  Widget? child;
}