Skip to content

Instantly share code, notes, and snippets.

@Wizpna
Created September 9, 2019 16:19
Show Gist options
  • Save Wizpna/80ea310f651a48696311d803b2bc64e2 to your computer and use it in GitHub Desktop.
Save Wizpna/80ea310f651a48696311d803b2bc64e2 to your computer and use it in GitHub Desktop.
This project Demostracte how to build Whatsapp, Messenger and Instagram status stories using Flutter
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final storyController = StoryController();
@override
void dispose() {
storyController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink,
title: Text("Status Stories"),
centerTitle: true,
),
body: StoryView(
[
//The StoryItem.text accepts a text, you can add any text you want
StoryItem.text(
"WOW !!! i built my first status story",
Colors.pinkAccent,
fontSize: 25
),
//The StoryItem.pageImage accepts an image, you can add any image you want
//In this tutorial, Cached Network Image Provider was used so as to load the image and also cache images
//StoryItem.pageImage accepts a caption
//The caption describes the image above
StoryItem.pageImage(
CachedNetworkImageProvider(
"https://i.pinimg.com/originals/f6/eb/53/f6eb535411056b553dfdec1665387c0c.jpg"),
caption: "Simply beautiful😘😘😘",
),
StoryItem.pageImage(
CachedNetworkImageProvider(
"https://i.pinimg.com/originals/f6/eb/53/f6eb535411056b553dfdec1665387c0c.jpg"),
caption: "Simply beautiful😘😘😘",
),
StoryItem.pageImage(
CachedNetworkImageProvider(
"http://s3.weddbook.com/t4/2/5/0/2501568/vanila-wedding-boutique-dubai-on-instagram-have-a-lovely-weekend-everyone-let-it-be-sunny-throughout-the-upcoming-days-to-enjoy-the-beach-and-the-sea-our-lovely-vanila-bride.jpg"),
caption: "Vanila Wedding Boutique Dubai",
),
StoryItem.pageImage(
CachedNetworkImageProvider(
"https://i0.pickpik.com/photos/836/957/310/adventure-jump-hipster-ext-preview.jpg"),
caption: "Jumping beside cliff during daytime",
),
//The StoryItem.pageGif accepts a GIf, you can add any Gif you want
//It accepts a caption. The caption describes the image above
StoryItem.pageGif(
"https://media.giphy.com/media/XcA8krYsrEAYXKf4UQ/giphy.gif",
caption: "Thanks for watching",
controller: storyController,
),
],
onStoryShow: (s) {
print("Showing a story");
},
onComplete: () {
print("Completed a cycle");
},
progressPosition: ProgressPosition.top,
repeat: true,
controller: storyController,
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment