Story View Flutter Widget Tutorial

This articles explains you how to create story view in flutter applications to display stories like facebook, instagram, whatsapp etc. We are using story_view package to implement this view in flutter app.

Nowadays stories are most used in social media applications to display status etc. In this flutter example, we are going to implement story view in our flutter apps. We will display story in form of text, image and video in this story view.

story_view package has many features. We can also share simple text status story. We can also captain each story item in this story view. We can also pause, previous and next story using gestures. Progress Indicator is also displayed on top of every story view.

There are many properties in this story_view package. controller attribute is used to control playback of the stories. storyItems property takes list parameter to display multiple pages or stories. onComplete callback is used to detect story is completed or not.

onVerticalSwipeComplete callback is used to detect vertical swipe gesture. onStoryShow callback is used to detect story is currently being shown or not. progressPosition attribute is used to decide where progress indicator is displayed.

 

Add required dependency in your pubspec.yaml file

story_view: ^0.12.3
 
 

Story View Flutter

StoryItem.pageImage widget is used to take image url as parameter to display image in story. We can also display text in stories using StoryItem.text widget. We can also display video in stories like image.

import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;
import ‘package:story_view/story_view.dart’;

class MyStoryViewScreen extends StatefulWidget {
@override
_MyStoryViewScreenState createState() => _MyStoryViewScreenState();
}

class _MyStoryViewScreenState extends State<MyStoryViewScreen> {
final storyController = StoryController();

@override
Widget build(BuildContext context) {
final List<StoryItem> listStoryItems = [
StoryItem.pageImage(
url:
“https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzh8fGV1cm9wZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60”,
controller: storyController),
StoryItem.pageImage(
url:
“https://images.unsplash.com/photo-1533105079780-92b9be482077?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z3JlZWNlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
controller: storyController),
StoryItem.pageImage(
url:
“https://images.unsplash.com/photo-1511527661048-7fe73d85e9a4?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c3BhaW58ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
controller: storyController),
];
return Material(
child: StoryView(
storyItems: listStoryItems,
controller: storyController,
inline: false,
repeat: true,
),
);
}
}

 
 
 
story view flutter
 

Leave a Reply