Story View In Flutter

In the present fast market, a few social channels have been out and out blasting and are the hot talk among individuals of all age gatherings. Stroll through the digital environment and you will notice new online media applications like Instagram standing hot as fire in the year and past.

At the point when you hear the term web-based media application, possibly applications like Facebook, Instagram, Twitter, or Linkedin come into view. Yet, have you at any point considered how to show a story on an online media application like Instagram?. Online media applications are an open gathering for you to associate with individuals from the whole way across the world with a simple UI.

In this blog, we will explore the Story View In Flutter. We will implement a story view demo program and how to create a story like WhatsApp using the story_view package in your flutter applications.

story_view | Flutter Package
Run this command: With Flutter: $ flutter pub add story_view This will add a line like this to your package’s…pub. dev

Table Of Contents::

Flutter Story View

Features

Properties

Implementation

Code Implement

Code File

Conclusion

---

---

Flutter Story View:

Story View Flutter Library Widget is helpful for the Flutter developer, By utilizing this library you can show Social media stories pages very much like WhatsApp Status Story or Instagram Status Story View. Can likewise be utilized inline/inside ListView or Column actually like the Google News application. Accompanies gestures to pause, forward, and go to the back page.

Demo Module :

This demo video shows how to create a story view in a flutter. It shows how the story view will work using the story_view package in your flutter applications. It displays your story like text, images, video, etc. Also, the user will forward, previous, and gesture to pause the stories. It will be shown on your device.

Features:

There are some features of Story View are:

• > Simple Text Status story.
• > Images, GIF Images Stories, and Video Stories( with caching enabled).
• > Gesture for Previous, Next, and Pause the Story.
• > Caption for each story item.
• > An animated Progress indicator on top of every story view.

Properties:

There are some properties of Story View are:

• > controller: This property is used to controls the playback of the stories.
• > onComplete: This property is used to the callback for when a full cycle of the story is shown. This will be called each time the full story completes when the repeat is set to true.
• > storyItems: This property was not null and pages to display.
• > onVerticalSwipeComplete: This property is used to the callback for when a vertical swipe gesture is detected. If you do not want to listen to such an event, do not provide it.
• > onStoryShow: This property is used to the callback for when a story is currently being shown.
• > progressPosition: This property is used where the progress indicator should be placed.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  story_view: 

Step 2: Import

import 'package:story_view/story_view.dart';

Step 3: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called status_screen.dart inside the lib folder.

In this screen, we will create a UI like WhatsApp. We will add a container widget. Inside, we will add network image, text, and onTap function wrap to the ListTile. In this function, we will navigate to StoryPageView() class.

Container(
  height: 80,
  padding: const EdgeInsets.all(8.0),
  color: textfieldColor,
  child: ListView(
    children: <Widget>[
      ListTile(
        leading: CircleAvatar(
          radius: 30,
          backgroundImage: NetworkImage(
              "https://images.unsplash.com/photo-1581803118522-7b72a50f7e9f?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bWFufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"),
        ),
        title: Text(
          "Logan Veawer",
          style: TextStyle(fontWeight: FontWeight.bold,color: white ),
        ),
        subtitle: Text("Today, 20:16 PM",style: TextStyle(color:white.withOpacity(0.5)),),
        onTap: () => Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => StoryPageView())),
      ),
    ],
  ),
),

When the user presses the container then they will be shown a story page. We will deeply discuss the below code. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Create a new dart file called story_page_view.dart inside the lib folder.

First, we will create a final _controller that is equal to the StoryController().

final _controller = StoryController();

We will create a List of storyItems. First, we will add StoryItem.text means add only simple text status with the different background colors. Second, we will add StoryItem.pageImage means to add a URL of an image with the controller to control the story. Last, we will add the URL of the gif video with the controller and image fit.

final List<StoryItem> storyItems = [
  StoryItem.text(title: '''“When you talk, you are only repeating something you know.
   But if you listen, you may learn something new.” 
   – Dalai Lama''',
      backgroundColor: Colors.blueGrey),
  StoryItem.pageImage(
      url:
          "https://images.unsplash.com/photo-1553531384-cc64ac80f931?ixid=MnwxMjA3fDF8MHxzZWFyY2h8MXx8bW91bnRhaW58ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
      controller: controller),
  StoryItem.pageImage(
      url:
          "https://wp-modula.com/wp-content/uploads/2018/12/gifgif.gif",
      controller: controller,
      imageFit: BoxFit.contain),
];

We will return a Material() method. In this method, we will add StoryView(). Inside, we will add a list of storyItems, controller, inline means if you would like to display the story as full-page, then set this to `false`. But in case you would display this as parts of a page like a ListView or Column then set this to true. We will add repeat means the user should the story be repeated forever then true otherwise, false.

return Material(
  child: StoryView(
    storyItems: storyItems,
    controller: controller,
    inline: false,
    repeat: true,
  ),
);

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

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

class StoryPageView extends StatefulWidget {
  @override
  _StoryPageViewState createState() => _StoryPageViewState();
}

class _StoryPageViewState extends State<StoryPageView> {
  final controller = StoryController();

  @override
  Widget build(BuildContext context) {
    final List<StoryItem> storyItems = [
      StoryItem.text(title: '''“When you talk, you are only repeating something you know.
       But if you listen, you may learn something new.” 
       – Dalai Lama''',
          backgroundColor: Colors.blueGrey),
      StoryItem.pageImage(
          url:
              "https://images.unsplash.com/photo-1553531384-cc64ac80f931?ixid=MnwxMjA3fDF8MHxzZWFyY2h8MXx8bW91bnRhaW58ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
          controller: controller),
      StoryItem.pageImage(
          url:
              "https://wp-modula.com/wp-content/uploads/2018/12/gifgif.gif",
          controller: controller,
          imageFit: BoxFit.contain),
    ];
    return Material(
      child: StoryView(
        storyItems: storyItems,
        controller: controller,
        inline: false,
        repeat: true,
      ),
    );
  }
}

Conclusion:

In the article, I have explained the Story View of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Story View On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Story View in your flutter projects. We will show you what the Story View is?. Show some properties and features of the Story View widget. Make a demo program for working Story View and It displays your story like text, images, video, etc. Also, the user will forward, previous, and gesture to pause the stories using the story_view package in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the FlutterStory View Demo:

flutter-devs/flutter_story_view_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---