Promise Amadi
Promise Amadi's Blog

Promise Amadi's Blog

Fastest way to build Your Whatsapp Status Story with Flutter

Fastest way to build Your Whatsapp Status Story with Flutter

Promise Amadi's photo
Promise Amadi
·Sep 11, 2019·

min read

…Get free guidance on how to set up your own Facebook Messenger, Whatsapp and Instagram status stories using Flutter.

Please, just so we are clear, you are going to learn how to build a status story app using Flutter, the app will look just like that of Instagram, Facebook, and Whatsapp.

With that clearly stated, let's proceed.

What is Status Story?

Status Story is a feature that allows social media users to share on-the-go photos and videos across their social media platforms.

Status stories disappear after 24 hours of uploading it.

I promise you that at the end of this article, you will build a status story app that looks like this image below:

So, let’s jump in.

Create a new Flutter project using Visual Studio, IntelliJ or Android studio.

If you have IntelliJ installed on your computer, click: File>>New>>Project, Select Flutter and click “Next

Enter the project name and click “Finish

Open “pubspec.yaml” file.

Install these two packages below:

  • story_view package — this library helps display stories just like Whatsapp and Instagram.
  • cached_network_image — the cached network image library is used to load images and also cache network images.
  story_view: ^0.10.0
  cached_network_image: ^1.1.1

Open your main.dart file and add this code below:

Run your app on your smartphone or emulator.


You have built a simple Messenger, Instagram and Whatsapp status stories using Flutter

How the code works…

StoryView adds stories to screen, it requires a list of StoryItem which can be text, image or Gif.

StoryItem.text create a story page that displays only text.

StoryItem.pageImage creates a story item to display images with a caption.

StoryItem.pageGif and StoryItem.inlineGif creates a story item to display Gif with a caption.

NOTE: StoryItem.pageGif and StoryItem.inlineGif can also load non-animated graphic media like PNG, JPG, etc.

P.S. Here is the source code for the project you just worked on.

My name is Promise Amadi. I am a writer and Flutter Developer. I work with startups across the globe to build mobile solutions using Flutter.

To get regular updates and happenings from the world of Flutter, and mobile development, follow me onTwitter, Facebook, Linkedin, and Github.

If you found this article helpful and educating, please hit the like button and also share with your friends.

Share this