Code Your Own Instagram Clone With Flutter and Feeds

In this video, we will show you how you can easily create a clone of Instagram using Stream Feeds and Flutter.

We will, very creatively, call our Instagram clone Stream-agram. You’ll also learn a lot of Flutter concepts to improve animations, gestures, transitions, and state management.

---

---

---

---

Timestamps:
0:00 Intro
4:29 App Dependencies
6:03 Stream Application Project Setup
10:27 Generate User Tokens
13:29 Flutter Folder Structure
14:56 Create App Demo Users
16:24 Barrel Files Information
17:30 Dark and Light Theme
18:53 Model Class - User
22:56 State Management - Provider
27:34 Initialization and Providers
31:17 Utilities and Extensions
32:45 Create the Login Screen
34:27 Create the Home Screen
35:48 Initialize App
36:44 PageView, PageController and BottomNavigationBar
38:54 Review Progress
39:31 Create the Avatar Widget
42:01 Create the Profile Page
43:46 Create “user” FlatFeedCore
45:37 CustomScrollView
47:33 Create the Edit Profile Screen
53:56 Create a Custom PageRouteBuilder
55:33 Provider Select Method
56:12 Image Picker Package
1:00:00 Tap Fade Icon Widget
1:01:00 Create the New Post Screen
1:05:03 Add Activity to “user” Feed
1:08:59 feedBuilder, Activities and Followers
1:11:19 Create Custom RectTween
1:12:44 Create Custom Page Transition
1:13:30 Create Picture Viewer
1:16:29 Hero Animation
1:18:31 InteractiveViewer Widget
1:19:03 Customize Hero Animation
1:19:36 Cached Network Image
1:21:19 Update AppBar Actions
1:23:01 Create the Search Page - Follow/Unfollow Feeds
1:29:13 Create the Favorite Icon Button Widget
1:30:20 Change To Light Theme
1:31:17 Create the Comment Box
1:31:57 Create the Timeline Page
1:38:29 EnrichmentFlags
1:41:13 Add Comment Reaction
1:45:02 Create an Explicit Animation
1:46:58 Performance Tip: Visibility vs Opacity
1:48:53 Explore Post Card Widget
1:50:10 Manage Like Reaction State
1:52:07 Explore Post Card - continue
1:53:51 Comment Screen and Comment State
1:57:46 ReactionListCore
1:59:01 Add Child Reactions (Comments and Likes)
2:02:06 Follow Own “user” Feed
2:04:12 Use AutomaticKeepAliveClientMixin to Cache Pages
2:05:46 Conclusion

[markuskankare]

One of the best Flutter tutorials here in YouTube!

[Elyaradine]

Ha, I was just getting into Flutter and looked for some videos... and thought I recognised the accent! Hello from South Africa!

[victorjames]

Nice video, can you make an X clone with flutter and firebase

[arfianahmedrafin]

I recently watched your video where Stream is utilized as a database, and I appreciate the informative content. I noticed that the free tier of Stream allows for a limit of 25 active users in a month. I am curious about a scenario where 25 users have already signed up within an hour, and another 5 individuals wish to register. Given that the database limit for the free tier has been reached, could you kindly clarify whether the additional 5 users would be able to sign up, or if there are restrictions in place for exceeding the specified limit?

[mumair]

this is great. How about continuing this tutorial and show us how to enable chat between users as well? or any tutorial that can demonstrate both chat and activity feeds working together.

[naderkhaled]

Thank you so much for this video, truly helpful. Any news on when the notifications part would come out ?

[mawandenxumalo]

How easy is it to migrate to another back-end, such as Mongo or even Firebase when you don't wanna use get stream anymore?

[RelateNetwork]

iswr took me a while to realize this man is not an AI

[Varnofx]

Will this work with the current version of Flutter as of May 2024?

[Kumark]

Waiting for your quick reply to my earlier queries, already posted on support-Stream-agram also

[creativehustlers]

How can we implement functionality like if user follow particular hashtags all related post will be added to his feed, also how to retrieve all hashtags?

[proro]

Thanks for this tutorial, can you guys add the chat feature to this app using your Chat Sdk.

[polizeifunk]

Hi Gordon, thanks a lot for this helpful tutorial. I noticed that the postcards in the timeline loose their status after scrolling. If you like a post, scroll down a bit and then back up the like is gone. Only a complete page reload will show the like again. Is there any way to keep the reaction status during scrolling of the list view?

[dcsuperstar]

Do it has notifications? I am planning to make a social media app by stream. So notifications is so important.

[atotech]

Please can you remake this tutorial but with react native? There is a lack of tutorials when it comes to react native and i really need it

[tarunperam]

Hi sir,
Could You please tell me what are the technologies used in it (frontend, backend, database)

[saidakbarjuraev]

I am trying to run cli to create tokens, i have cloned repo, entered the stream-feed-cli folder, but when i run 'dart run' it throws failed to build stream_feed_cli error. also it says 'Error: type "BidirectionalIterator" not found'. any ideas how i can fix this :)

[golammohiuddinlabib]

Is this project will work in windows os?

[srishakthivarshinirb]

Actually I need to create a alumni like this(similar pattern) so can you suggest what are the things can be added?

[pubgteammatetroll]

Is Android apk available of this project on play Store?