Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Packages

Create Stories like Instagram & WhatsApp Status – Flutter Package

August 9, 2020
in Flutter Packages, UI
3 min read
Create Stories like Instagram & WhatsApp Status – Flutter Package

Here’s a simple customizable flutter package that allows you to use Instagram like stories, or WhatsApp like status in your Flutter app easily, made without using external dependencies.

RELATED FLUTTER RESOURCES

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

A Beautiful Bottom navigation bar with bubble click effect in Flutter

A Simple Hacker News reader app built in Flutter

Using the package 

Step 1: Import the package.

ADVERTISEMENT
import  'package:stories_for_flutter/stories_for_flutter.dart';

Step 2: Call the stories plugin and use it. Can give Scaffold to each page, making it highly customizable.

  Stories(
    storyItemList: [
      // First group of stories
      StoryItem(
          name: "First Story", // Name of first story
          thumbnail: // Add icon to first story
          stories: [
            Page1(),
            Page2(),
          ]),
      // Second story group
      StoryItem(
          name: "Second Story", 
          thumbnail: // Add icon to first story
        stories: [
          Page1(),
          Page2(),
          Page3()
        ],
      ),
    ],
  );

Example:

Stories(
    storyItemList: [
      // First group of stories
      StoryItem(
          name: "First Story",
          thumbnail: NetworkImage(
            "https://assets.materialup.com/uploads/82eae29e-33b7-4ff7-be10-df432402b2b6/preview",
          ),
          stories: [
            // First story
            Scaffold(
              body: Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(
                      "https://wallpaperaccess.com/full/16568.png",
                    ),
                  ),
                ),
              ),
            ),
            // Second story in first group
            Scaffold(
              body: Center(
                child: Text(
                  "Second story in first group !",
                  style: TextStyle(
                    color: Color(0xff777777),
                    fontSize: 25,
                  ),
                ),
              ),
            ),
          ]),
      // Second story group
      StoryItem(
        name: "2nd",
        thumbnail: NetworkImage(
          "https://www.shareicon.net/data/512x512/2017/03/29/881758_cup_512x512.png",
        ),
        stories: [
          Scaffold(
            body: Center(
              child: Text(
                "That's it, Folks !",
                style: TextStyle(
                  color: Color(0xff777777),
                  fontSize: 25,
                ),
              ),
            ),
          ),
        ],
      ),
    ],
  );

Screenshots

GitHub

Stories like Instagram or statuses like WhatsApp with the highly customizable stories for Flutter package.
https://github.com/steevjames/Stories-for-Flutter
7 forks.
30 stars.
1 open issues.
Recent commits:

  • Update FUNDING.yml, GitHub
  • Update FUNDING.yml, GitHub
  • Update FUNDING.yml, GitHub
  • Merge pull request #1 from steevjames/add-license-1Create LICENSE, GitHub
  • Create LICENSE, GitHub

RelatedFlutter Resource

Navigation

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

September 15, 2020
A Beautiful Bottom navigation bar with bubble click effect in Flutter
Navigation

A Beautiful Bottom navigation bar with bubble click effect in Flutter

September 15, 2020
A Simple Hacker News reader app built in Flutter
Flutter Apps

A Simple Hacker News reader app built in Flutter

September 15, 2020
A Flutter package that detects credit card types from the first input
Card

A Flutter package that detects credit card types from the first input

September 7, 2020
A Verification Code Input Widget to get Value in Flutter.
Flutter Packages

A Verification Code Input Widget to get Value in Flutter.

September 7, 2020
How to select & Pick a Countries from a List in Flutter
Flutter Packages

How to select & Pick a Countries from a List in Flutter

September 2, 2020
Next Post
How To Create and Run Dart Code in Console Using VSCode?

How To Create and Run Dart Code in Console Using VSCode?

How to Create a Rounded/Circular Button (Border-radius) In Flutter

How to Create a Rounded/Circular Button (Border-radius) In Flutter

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

Flutter Animated Bottom Navigation Bar

Fancy Animated Bottom Navigation Bar in Flutter

August 6, 2020
add flutter image to app

Image Widget – Everything You Need To Know

July 12, 2020
A Verification Code Input Widget to get Value in Flutter.

A Verification Code Input Widget to get Value in Flutter.

September 7, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • How to use the Flutter Text Field and Input Widget

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In