Flutter Instagram Stories Tutorial

» Flutter courses, writeups, and source code on Launch Club 🧠
drp.li/Iq9Bk
» Flutter Job Board 👋
drp.li/T9bLq
This Flutter tutorial will teach you how to build Instagram Stories’ viewer functionality to navigate between images, gifs, and videos automatically and by tapping. You’ll also learn how to create animated bars that fill based on the duration of the content.
» Remember to like, subscribe, comment, and share this video! 🚨
kzbin.info?sub_...
» Socials📱
GitHub: github.com/MarcusNg
Twitter: / marcuslng
» Resources 📁
Source Code: github.com/MarcusNg/flutter_i...
data.dart: github.com/MarcusNg/flutter_i...
cached_network_image package: pub.dev/packages/cached_netwo...
video_player package: pub.dev/packages/video_player
» Timestamps 🕒
00:00 Introduction
01:12 Step 1 - User and Story Models
02:12 Step 2 - Display Content
04:38 Step 3 - Tap Gestures
05:56 Step 4 - Animated Bars
09:37 Step 5 - User Info
10:23 Thanks for watching!
» Music 🎶
JINXSPR0 - WaveRider [Bass Rebels Release] ( • JINXSPR0 - WaveRider [... )
www.bassrebels.co.uk/WaveRider
Joakim Karud ( / joakimkarud )
#Flutter #FlutterUI #FlutterInstagram

[@melissaposmore9371]

Best option for more fáńś in'sta'crease 00:05 -which song did you use?- -also quiz jock- The good or ill of a man lies within his own will.

[@tomferguson8539]

This is some high quality material, now gladly part of the 16.1%

[@lucavinciguerra]

Really great video as always, Marcus. Your instructions were really good and easy to follow

[@humancyyborg]

I love how you code..so clean and organized

[@Opeyemi.sanusi]

Love this style of making tutorials

[@stevenstone307]

You have an amazing channel here mate

[@gideonkamau8299]

That was a masterpiece!

[@victorgalleto3771]

Amazing tutorial! Thank you very much. Greetings from Brazil

[@vaishnavisood9699]

I had to subscribe to you man...you are wonderful!

[@bashir26]

Awesome Marcus!

[@VitorLucasOFICIAL]

I'm part of the 16.1%. Thank you for the incredible material!

[@SammarpanDasguptaOfficial]

Your tutorial just awesome.... I learned lot from here

[@anell0784]

Love your videos!! 👍

[@guillermosantos7224]

Thank you! You have a new subscriber :)

[@dalestewart]

Excellent tutorial!

[@appproject9197]

Amazing tutorial!

[@salahuddinshaikh7847]

Hats off brother!! Keep it up❤️❤️

[@kerimamanov7760]

Great job, man.

[@user-gu5ts5nx8r]

Thank you so much for sharing.

[@yasserharzelli7984]

this channel is gonna be viral

[@quocanhnguyen3233]

thanh you, it helps me a lot

[@floodyboy5307]

Very nice 👍🏼

[@bmk4308]

Awesome again

[@AiDidthis.]

Thanks Bro I just subscribed

[@JINXSPR0]

what an amazing guide! engaging for instagram viewers! *thanks* for supporting my music on your channel! I greatly appreciate it :) take care 🦊😁🏄‍♀️

[@georgebutton8071]

Hey Marcus, I really loved the way you have made this video, it's possibly the best tutorial on how to create an instagram story. I just had a question, is there a way to showcase a forward >>, rewind ) on tap along with the gesture detector. I know its been a while since you posted the video but any input would help. Thanks in advance! :-)

[@aamilsilawat3069]

Great you are amazing :D

[@troylee5205]

alrdy smashed the like button

[@troylee5205]

and subscribe button & notifs

[@mgmyo7066]

Perfect sir

[@akmalqurbonov2203]

Hi man that is great! Can you show how to make skip function like in instagram on stories please?

[@wagnercsfilho]

Muito bom 👏👏🇧🇷

[@indigoguerra920]

This was really helpful, but could you show us how we would get the list of stories dynamically from Firebase? I've been struggling with this. It would be so helpful!!

[@darshanchaudhari6994]

Its very good👍 but you can use flutter story view package . It lot more easier, if you agreed make another video on that package

[@PavanKumar6e]

Wonderful. Now part of 16.1%

[@wowzeetv]

this is great. I have a problem with the sound not stopping and overlapping. Any sugestions

[@nixonoftheyear]

there is a problem in the videocontroller, when you have a mediatype.video story and you click the screen to skip to the next story the audio of previosly video continues, if the next story is a video there is a problem of overlying.

[@mohsenalbo5533]

Nice

[@digantakrdas8258]

Is there any way to start the the animated progress bar animation only when the image/video is loaded ? Sometimes when the internet is slow animated bar progresses but the image does not load on time. Please Implement the feature

[@ssupercrack]

buenisimo

[@hematoma7645]

What's your VSCode extension? I like the tree-line visual

[@vishvajeetsingh9843]

What about swipe animation when we switch users in stories?

[@omchevli1164]

I want to implement Story upload feature.

[@luqmanziyard705]

hey! how to create a this with firebase back end?

[@milanpoudel3348]

Suppose I have lots of users with their own stories how should I implement the code such that after displaying all stories of one user it starts another user stories?

[@aytunch]

Is there a way to get rid of the black flicker before every video is presented? (like preloading maybe? How can we achieve it with PageView.builder)

[@user-ff5lh6wl3v]

Thanks a lot. But I have a question. How can I synchronize video player controller and animation controller? I face an issue, when network video is playing and then paused(weak internet connection), animation controller continue working. I want to know how detect video playing in this case. I tried to use "isPlaying" parameter of video player controller, but it is wrong way to detect, cause "isPlaying" detects only once, when controller initialized, and then only when I manually pause video it returns false, but this param doesn't detect if video paused by weak internet connection or if video is not buffered. Do you know any solution?

[@aytunch]

Hi Marcus this is great tutorial, thanks. How could we preload the video or image that the user will be about to see beforehand? It would be very cool if you could cover this subject too.This would also fix the black screen artifact senn while passing between stories(because the video is not loaded for an instance there is a black screen)

[@aytunch]

@@MarcusNg Blurhash sounds like a great idea. I will look into it. the preload package you shared has not been maintained for a very long time unfortunately:( there are some problems with it. take care

[@uditswaroopa5809]

Hey, I wanted to implement the Instagram Reels feature in my app, can you please give me an abstract view of how can I do it? NOTE: Videos are fetched from Firebase

[@mopilani]

Wow perfect (ツ)

[@Ashish-pc6lq]

hi did you made this website using flutter web ???????

[@itti1820]

Does this work on web browser ?

[@zzco]

jifs?

[@karanmehta6150]

This is great for single user but what if we want to have multiple users like in instagram?

[@milanpoudel3348]

Yes same question...have you created such features till now I mean story features just like in messenger?

[@gauravidesigns]

how did you made the video.Did you used after affects.If u use any other software please let me know.I also want to make promo videos my app inside a 3d mobile