Social Media Story View Page development using Flutter

Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will make use of a Flutter Library “Story_View” using which you can easily create a whatsapp stories or instagram stories page.

Introduction to story view package library

Story View Flutter Library Widget is very useful for the Flutter developer, By using this library you can display Social media stories pages just like WhatsApp Status Story or Instagram Status Story View.

FINAL RESULT OF THIS LIBRARY

Features of StoryView Widget Library

You can add

1. Simple Text Status story.
2. Images Stories.
3. GIF Images Stories.
4. Video Stories( with caching enabled).
5. Gesture for Previous,Next and Pause the Story.
6. Caption for each story items.
7. A animated Progress indicator on top of every story views

Let’s get Started with adding this library into your flutter project

Social Media Story View Page development using Flutter

Step 1 : Adding Story View dependencies into your flutter project

Open pubspec.yaml file and add the story view dependencies under dependencies section

dependencies:
  story_view: ^0.10.0   // add this line

Step 2: Import the story_view.dart file in main.dart

open main.dart file and import the class file in it

import 'package:story_view/story_view.dart';

Step 3: Creating StoryItem list and adding it to HomePage(main.dart) with widget

Create a storyController

final storyController = StoryController(); // used to control the media story

Generate a list of stories

//creating the list of Social media Storys
// Social Media Story List

  List<StoryItem> storyItemsList = [
    StoryItem.text("Hello Guys, 👉", Colors.blue[500]), //story 1
    StoryItem.text(
        "Welcome to Proto Coders Point, 👉", Colors.red[600]), //story 2
    StoryItem.pageImage(
        NetworkImage(
            "https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
        caption: "THINK TWICE CODE ONCE"), //story 3

    StoryItem.pageImage(
        NetworkImage(
            "https://protocoderspoint.com/wp-content/uploads/2019/10/protocoderspoint-rectangle-round-.png"),
        caption: "HOPE THIS TUTORIAL HELP YOU"), //story 4
  ];

then, Add the storycontroller and story item list into StoryView() widget

StoryView(
       storyItemsList,  // this is list of StoryItems
       controller: storyController, 
       repeat: true,  // set it to false if 
       onComplete: () => print("STORY COMPLETED"), // what sould happen when story ends
     ),

Complete code Copy Paste it in main.dart file

main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      //removing debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // lets start creating Social media Story view

  final storyController = StoryController(); // used to control the media story

  //creating the list of Social media Storys
// Social Media Story List

  List<StoryItem> storyItemsList = [
    StoryItem.text("Hello Guys, 👉", Colors.blue[500]), //story 1
    StoryItem.text(
        "Welcome to Proto Coders Point, 👉", Colors.red[600]), //story 2
    StoryItem.pageImage(
        NetworkImage(
            "https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
        caption: "THINK TWICE CODE ONCE"), //story 3

    StoryItem.pageImage(
        NetworkImage(
            "https://protocoderspoint.com/wp-content/uploads/2019/10/protocoderspoint-rectangle-round-.png"),
        caption: "HOPE THIS TUTORIAL HELP YOU"), //story 4
  ];

  @override
  Widget build(BuildContext context) {
    return Material(
      child: StoryView(
        storyItemsList,
        controller: storyController,
        repeat: true,
        onComplete: () => print("STORY COMPLETED"),
      ),
    );
  }
}

Then, your flutter application is ready to show a Story page with 4 StoryItems.

For more in detail about this Story View Page Flutter library visit official here