Flutter App Development Course - Build a Twitter Clone with Appwrite and Riverpod

Use Flutter 3.7 to build a Twitter clone in this full course. We will cover various features such as signing up and signing in with email and password, tweeting text, images, and links, identifying and storing hashtags, displaying tweets, liking tweets, retweeting, commenting/replying, following users, searching for users, displaying followers, following, and recent tweets, editing user profiles, showing tweets with specific hashtags, and a premium feature called "Twitter Blue". Additionally, we will also be implementing a notifications tab that will show notifications when someone replies to you, follows you, likes your tweet or retweets. By the end of this tutorial, you'll have a fully-functional Twitter clone that you can further customize and improve upon.
Tech Used - Flutter, Appwrite Authentication, Database, Storage, Realtime, Queries, Indexes, Riverpod.
Prerequisites: Flutter & Dart Basics
✏️ Course developed by @RivaanRanawat
💻 Source Code - github.com/RivaanRanawat/flut...
📌 Discord Server (Join the Community) - / discord
ADB Command - adb reverse tcp:3000 tcp:3000
📄 Resources:
Assets - github.com/RivaanRanawat/flut...
Asset Constants File - github.com/RivaanRanawat/flut...
Pallete (Colours File) - github.com/RivaanRanawat/flut...
Theme File - github.com/RivaanRanawat/flut...
Appwrite Docs - appwrite.io/docs
⭐️ Contents ⭐️
(0:00:00) Introduction
(0:02:07) Appwrite & Docker Installation
(0:05:31) Important Appwrite Commands
(0:07:14) Appwrite Setup for Android & iOS
(0:09:32) Setting up Flutter Project
(0:17:59) Architectural & Folder Pattern
(0:24:37) Login UI
(0:49:53) Signup UI
(0:55:23) Signing Up User with Appwrite Auth
(1:16:37) Providing the Class / Dependency Injection
(1:25:03) Signing Up User contd. (Auth Controller)
(1:49:11) Login User with Appwrite Auth
(1:54:12) Adding Proper Navigation
(1:57:22) Persisting Auth State
(2:06:37) Saving User Data to Appwrite Database
(2:33:03) FIXING Android Related Problems
(2:34:31) Solving Appwrite unauthorized_scope Problem
(2:36:27) Home Screen UI
(2:44:43) Create Tweet Screen UI
(2:58:16) FIXING User Data Storage & Retrieval Bug
(3:00:43) Create Tweet Screen UI contd.
(3:08:23) Picking Multiple Images & Displaying in Carousel
(3:17:48) Storing Tweets to Appwrite Database & Appwrite Storage
(4:01:46) Displaying Tweets
(4:38:07) Displaying New Tweets LIVE with Appwrite Realtime
(5:01:04) Like Button Animation
(5:04:53) Liking Tweet
(5:16:38) Retweeting / Resharing Tweet (Realtime)
(5:40:52) Replying to other user’s Tweets
(6:18:06) Searching Users
(6:37:21) Displaying User Profiles
(7:04:39) Editing User Own Profile
(7:31:57) Updating User Profile Data Realtime
(7:41:30) Following Other users
(7:52:54) Sending Notifications when User Likes
(8:10:07) FIXING Like Bug
(8:10:58) Displaying & Sending Notifications
(8:38:47) Displaying Posts By Hashtags
(8:48:57) Side Drawer UI & Navigation to Current User Profile
(8:54:11) TWITTER BLUE
(8:59:23) Logging Out with Appwrite Auth
(9:02:27) Conclusion
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@RivaanRanawat]

Hey folks! Thanks for watching and I hope you enjoyed the course. Feel free to contact me with any questions and I'll be more than happy to answer them. Check out my channel for 10+ full stack project tutorials.

[@bharath2508]

Rivaan, You teaching skills are so good.

[@adityagautam4689]

Thank you so much Rivaan!

[@gusqau]

Hey Rivaan, great content and really nice code - love the architecture and separation between UI, providers and backend. Your English is fine mate 👍 ignore the few negative comments 😎

[@fonbarnabas2667]

Its possible to have a document file about the permissions configurations for databases...

[@santhoshlal27]

@Rivaan Ranawat is it possible to do this course using Dataocean?

[@gopalkmrr]

it's not about random cloning video, It's about architecture of the app, I learned a lot about How to organise the files and folder. Thanks Bro

[@jaideepsingh8657]

just finished 37hrs flutter course now this is cherry on top.

[@mma-dost]

how is that course man I know the instructor Vandid if I am wrong about the Sir, he have taught well in that course. Want to know about your opinion on the course because you have completed that course.

[@melio101]

Where can i get that course??

[@abdulmuqsit3858]

Where can we find the course?

[@mma-dost]

@@abdulmuqsit3858 bro that course you can find in freecodecamp channel itself or the creator channel search vandid flutter you will get it please reply once you find it.

[@mma-dost]

@@melio101 bro that course you can find in freecodecamp channel itself or the creator channel search vandid flutter you will get it please reply once you find it.

[@Fetrah2]

⭐ Contents ⭐ (0:00:00) Introduction (0:02:07) Appwrite & Docker Installation (0:05:31) Important Appwrite Commands (0:07:14) Appwrite Setup for Android & iOS (0:09:32) Setting up Flutter Project (0:17:59) Architectural & Folder Pattern (0:24:37) Login UI (0:49:53) Signup UI (0:55:23) Signing Up User with Appwrite Auth (1:16:37) Providing the Class / Dependency Injection (1:25:03) Signing Up User contd. (Auth Controller) (1:49:11) Login User with Appwrite Auth (1:54:12) Adding Proper Navigation (1:57:22) Persisting Auth State (2:06:37) Saving User Data to Appwrite Database (2:33:03) FIXING Android Related Problems (2:34:31) Solving Appwrite unauthorized_scope Problem (2:36:27) Home Screen UI (2:44:43) Create Tweet Screen UI (2:58:16) FIXING User Data Storage & Retrieval Bug (3:00:43) Create Tweet Screen UI contd. (3:08:23) Picking Multiple Images & Displaying in Carousel (3:17:48) Storing Tweets to Appwrite Database & Appwrite Storage (4:01:46) Displaying Tweets (4:38:07) Displaying New Tweets LIVE with Appwrite Realtime (5:01:04) Like Button Animation (5:04:53) Liking Tweet (5:16:38) Retweeting / Resharing Tweet (Realtime) (5:40:52) Replying to other user’s Tweets (6:18:06) Searching Users (6:37:21) Displaying User Profiles (7:04:39) Editing User Own Profile (7:31:57) Updating User Profile Data Realtime (7:41:30) Following Other users (7:52:54) Sending Notifications when User Likes (8:10:07) FIXING Like Bug (8:10:58) Displaying & Sending Notifications (8:38:47) Displaying Posts By Hashtags (8:48:57) Side Drawer UI & Navigation to Current User Profile (8:54:11) TWITTER BLUE (8:59:23) Logging Out with Appwrite Auth (9:02:27) Conclusion

[@damus6665]

Thank you

[@androspuddy2]

🙌🙌Been waiting on this for a while! - Thank you!!

[@wilsonchinedu813]

Simply Amazing 😮

[@herocodez4107]

For those wondering, when he creates the auth services instead of models.Account, make it models.Users. Else you'll get an error. Happy coding!

[@XYZDG]

Just amazing thinking about this!

[@shresthakushal]

Great video to follow along and learn flutter . Thanks a lot.

[@noormukeri804]

unable to setup from docker

[@liberalizationthroughmusic]

Keep Going Guyz!!!!

[@dev_janaco]

Este canal es una joya verdaderamenteeee

[@mozammalhossain968]

2:58:09 if you are facing the problem go back to 2:27:20 and also give the READ checked. (you can give check as per your need)

[@SomeshRajvlogs]

Thank you so much i was stuck here for full day.

[@mozammalhossain968]

@@SomeshRajvlogs You are welcome. I was facing the same problem while doing it. It's nice to see, someone has got help from my comment.

[@RohitKumar-ci7gh]

thanks bro, you relay saved me..................

[@mozammalhossain968]

@@RohitKumar-ci7gh you're welcome

[@binhlethai3272]

how you fix that?

[@ashishdhanda00007]

Great video on Flutter app development! It's really impressive to see the process of building a Twitter clone using Appwrite and Riverpod. The instructor explains the concepts clearly and provides a step-by-step guide, making it easy for anyone to follow along. What's also great about this tutorial is that it goes beyond just teaching how to build a Twitter clone. It also covers essential concepts like state management, API integration, and user authentication, which are crucial for building any real-world app. Overall, this video is an excellent resource for anyone interested in learning Flutter app development or building their own app using Appwrite and Riverpod. Kudos to the instructor for putting together such a comprehensive and informative tutorial.

[@ashishdhanda00007]

Congratulations on starting your journey with Flutter! As for your question, it's perfectly fine to follow the tutorial even if you've just started learning Flutter. The tutorial will likely cover some concepts that you haven't encountered yet, but that's okay. Just take it as an opportunity to learn something new and reinforce what you already know. The best way to learn is by doing, so don't be afraid to dive in and try things out. If you encounter something you don't understand, don't hesitate to look it up or ask for help. Remember, learning is a continuous process, and you don't have to know everything before you start building real-world apps. So go ahead and follow the tutorial, and have fun.

[@sau2814]

They really did it.

[@sunny_gomes]

Man you guys are really great. Thanks for uploading these cool videos.

[@acsport5728]

😭😭😭 the people who are such a great and honest with

[@JabiloJoseJ]

ok...wow, what a timing :)

[@wayuberry]

Thank you🎉🎉🎉

[@ins2top]

nice🔥👏

[@islamelhatimi2089]

From the title and duration of video i expect that the instructor is Rivaan, and it was.

[@TheSclare]

Indian KZbin tutorials are the best!

[@planetchubby]

I sometimes have difficulty understanding tutorials spoken in a heavy Indian dialect, but I know that many people find them helpful. Have to skip this one...

[@prabhjotarora2740]

@@planetchubby follow subtitles

[@sihabportal8623]

Awesome

[@subramanianchenniappan4059]

Thanks

[@davidconteh2231]

All I have to say is nice...

[@LandusBakasima]

thanks for your work.. creat for us also tik tok clone using appwrite

[@miketaylor253]

Great video, Iam new to Riverpod and I am bit stuck, as auth_controller::currentUserDetailsProvider always returns a null userDetails for me. Have I missed something?

[@rushikeshkothawade9029]

Are there pre requisites for this course

[@moliver1695]

Hello, is this geared towards beginners? I have tons of React Native Experience but I'm a complete beginner in Dart/Flutter. Only learned basic Dart syntax thus far.

[@devinanugrahpapalangi3899]

Hi Rivaan! This is the third time I've watched and followed your tutorials, and I hope you don't mind me asking a question. In your video, the signup flow involves filling out the forms, creating the account, and then proceeding to the login screen, correct? I'd like to modify this flow so that after filling out the forms and creating the account, the user is automatically logged in and taken to the home screen. I've tried a few approaches, including: After creating the account in the _authApi, I also create an email session. After creating the account in the AuthController, I call _authApi.login with the email and password. After creating the account in the signup_view, I call ref to sign up. I've managed to navigate to the /home screen successfully, but it doesn't feel smooth. It seems to briefly go to the login screen and then immediately redirects to the home screen. Do you have any suggestions or tips for achieving a smoother signup and automatic login process? Thanks!

[@ditsomusic]

Inst there some auth stream you can listen to in a stream builder and if logged in go X else go Y Like main -- | ---- AuthListener(stream auth event) --- logged --------- Go to home | | -----------------Go to sign up/login Just to give you some idea FYI: i know nothing about app write just giving an idea

[@SharwinBhadai]

What about sending a push notification to the device about all this in-app notifications?

[@ujjawaltyagi8540]

I want to know that if Dart is prerequisite for this tutorial or does he explain dart too ??? (haven't watched video yet)

[@santhoshlal27]

Really interesting, steep learning curve. I cound't make Appwrite work in my local machine, hence subscribed to Dataocean. Appwrite is working using dataocean. I am hoping now I can use Appwrite in cloud and Flutter in my local machine connected via VS SSH. Anyone tried in this way? I am not a developer myself so everything is new to me. Any help is highly appreciated.

[@adithyashetty004]

Is this tutorial good for beginners who have no idea about flutter?

[@livinglikejesus]

How to handle appwrite Email Verification for a flutter mobile app?

[@akashkarmakar5798]

You guys should make more flutter videos

[@srchaudhary6216]

Please provide for browser like chrome too

[@TouristGuy]

Off topic but how would you create an anti-screen-mirroring feature for any app?

[@parth_patel2933]

hey can you make a video on how to create a functions in appwrite.

[@cachorrodolink6111]

Man this is high quality code, so glad india exist

[@mahekarim4821]

I'm searching a flutter course in my mind. After few second the notification come on to my phone

[@warhammer5673]

In the auth_api.dart file, I get this: "The name 'model.Account' isn't a type, so it can't be used as a type argument. Try correcting the name to an existing type, or defining a type named 'model.Account'." Unlike in the video, my model.Account has a red squiggly line underneath it, and when I use it in the async block, model.Account() doesn't show up in the dropdown. I'm still at around the 1:11 mark of the video. Any ideas how to remove the squiggly line? In the meantime, I'll continue with the tutorial. Hopefully it will be resolved as I watch.

[@albertosdneto]

Try model.User and you will be good to go.

[@warhammer5673]

Thank you very much!@@albertosdneto

[@GadadeAvishkar]

But then it gives createEmailSession is not defined for type Account

[@rachidrachid-lo5uq]

can you do complete course react native

[@therongovender9471]

Hey man, for Either type have you looked at using Dartz?

[@RivaanRanawat]

Yup, they're similar. However, fpdart has better documentation and was upgraded much recently. In this course, you can use either dartz Or fpdart, will work fine for both. I personally recommend fpdart though.

[@therongovender9471]

@@RivaanRanawat Thank you man, Love the content bro, this is proper production ready code

[@RiyadAbdessalem]

does anyone faced this error ? "type List " is not subtype of type " List" in type cast. when trying to display the tweets

[@josemrt01]

nice

[@Taurh]

Flutter

[@adityamalu7200]

the App works fine in Andriod Emulator but whe it comes to real device i cant login or sign up , it just displays the loader..any solution for this...i tried this after implementing Imagepicker..

[@noormukeri804]

unable to setup from docker part and further

[@thedanab]

Duplicate GlobalKey detected in widget tree.(3:00:03) how can i slove this ?

[@iamarnabdey]

Unable to find the installation section in the docs of appwrite

[@ugurturan9416]

for anyone stuck at user signup error "The requested route was not found", you need to add /v1 at the end of endpoint address even when you command click and it doesn't work. not sure why though..

[@maxfrischdev]

If you like my perfect indian accent, smash the Like Button even harder! 😂 Great Course, @Rivaan ! 🤘🏻😎

[@JuanJose-ce4hs]

Why can't I get the realtime update on my profile editing and following even if I have the same exact code and configuration in my Appwrite console?

[@sahilmehta1098]

same issue, any updates on that?

[@mlints]

I managed to deal with this problem: you just need to create separate RealtimeProvider-s for tweets and users collections (for example, instead of one appwriteRealtimeProvider in providers.dart create similar tweetsAppwriteRealtimeProvider and usersAppwriteRealtimeProvider and user first one in tweet_api.dart and second one in user_api.dart) Maybe now Appwrite can manage only one stream per collection or I don't know

[@praveenkumarinti9047]

I am very new to flutter, can anyone suggest best video on KZbin to get started for beginners like me...

[@prabhjotarora2740]

Is this from basics?

[@thedanab]

in which patton this code is write?

[@jahbless4ever]

wowwwwwwwwww!!!!!!!!

[@theuntold1916]

Hi, I am getting an error as "The requested route was not found. Please refer to the API docs and try again" at (1:41:49) on android. I have added my IP address as endpoint. Still not working. Any suggestions?

[@usmanmarkaz]

Sir Plz React Native crash Course with Project sir plz

[@masupchannel5651]

twitter logo is not showing up when running the program need help in android

[@ShiveshSumbly]

my user profile is not updating realtime it only updates after reloading the app.Please help.

[@rohithpokala]

Meta team after watching this video😂

[@sameersinha9228]

It's a humble request

[@bharath5925]

Appwrite for web

[@dilipkn7339]

at 11:36 why /v1 ?

[@rushikeshkothawade9029]

Is the app built from scratch and is it beginner friendly

[@prabhjotarora2740]

Yes, from scratch, and beginner friendly even!

[@Adam0001]

Please make it in Android Jetpack Compose 😢

[@sameersinha9228]

Please create ai full course for java developer , and build multiple projects in it.

[@friendlyneighborkai265]

5:10 got stuck here, when trying to create it, it said “zsh: command not found: flutter” I typed everything exactly as you did. Any help? 😅

[@RivaanRanawat]

Hi! It seems flutter hasn't been installed on your system.

[@RiseofShuntron]

Hey, I am getting an Error as "'color' is deprecated and shouldn't be used. Try replacing the use of the deprecated member with the replacement." at (0:30:10) How to Solove this?

[@vrasheshganjre3437]

use colorfilter instead of color replace the code with this "colorFilter: const ColorFilter.mode(Pallete.blueColor, BlendMode.srcIn)"

[@freshtechtips]

Like

[@jhancock7890]

anybody else get the realtime tweet update to work and then it stopped working all of a sudden? I think its my database because the code is exactly the same in the tweet controller and tweetcard files

[@jhancock7890]

Had to sign out of appwrite and sign back in lol

[@sahilmehta1098]

@@jhancock7890 but it is only working until i hot reload or change account

[@codecraftedmind4221]

Elon Musk wants your location dude🐥

[@adelekeadekunle8365]

Funny 😂

[@RivaanRanawat]

🤣

[@user-iy9dv8uu8t]

I installed all the required packages to run your code. I am getting an error in auth.api.dart. It is: FutureEither line. It is saying "The name 'model.Account' isn't a type, so it can't be used as a type argument." It is not able to find the Account. I am getting this error everywhere when there is a model.something...The necessary import line is already there: import 'package:appwrite/models.dart' as model. What can be the problem?

[@hun3468]

I wonder also

[@airinhaque]

It should be model.User

[@hun3468]

@@airinhaque Thank you so much kind lady

[@donaldtrump2]

try 'model.User'

[@mawandenxumalo4901]

This is a very good tutorial but it is now outdated, need to update the lesson.

[@riderfhm5171]

In 2:58:05, i have stuck for so many days. I followed all the steps of the video. Don't know what to do... Can anyone help?

[@jhancock7890]

Has anyone gotten the error: "failed host lookup: 'hostname''" because I followed the tutorial up until 1:42:00 and it was working fine until I tried to signup a user. It worked when I cloned the project on my gaming pc but not on my mac. Just wondering if anyone else had this issue?

[@jhancock7890]

Nevermind. I think the issue is that I called 'client.setEndpointRealtime()' instead of 'client.setEndpoint'. Not sure what the difference between those two is but make sure you call the right functions lol

[@kunalchauhan5294]

@@jhancock7890 Lmao i was looking in comments if this is working or not it gave me a a lil jump scare but thank god it was just a typo

[@kevingarfield2094]

How to build KZbin clone?

[@mohammedmoinuddinhassanans3188]

Can anyone plz help me know that can we upload photos in it

[@gezaroth]

I’m having a problem, the moment i type the currentUser == null, and y press the button that takes me to the create tweet it stays in the loader and don’t change.

[@161_hiralborad6]

Same problem

[@donaldtrump2]

you have to change the permission on the users collection and add read permission. That is how i solved it for me.

[@festus-obi]

@@donaldtrump2 - thanks you saved me hours of reading through code and debugging

[@sufyankamil5817]

When I am trying to build app in android emulator the app keeps stoping. Anyone have faced this issue ?

[@Theaverageaiguy]

We also want a video on WhatsApp clone with flutter and maybe firebase. By the way if anyone from the freecodecamp team reads this comment. Please like it and let me know if it is possible

[@randomcsguy2065]

rivan has a tutorial on his channel for whatsapp clone as well, it has EVERYTHING

[@shivam_tech07]

@@randomcsguy2065 channel name?

[@randomcsguy2065]

@@shivam_tech07 Rivaan Ranawat only bro the instructor of this course

[@paua7742]

All engineers know it gets serious when they hear the indian accent

[@karis7539]

react native pls!!

[@wog4299]

1:09:59 note now Appwrite SDK now uses User as model instead of Account:

[@jimmywicker3698]

Thanks

[@nehan4720]

Return right(account) isn’t working tho

[@amitmasram1441]

Thanks brother

[@BurhanAijaz]

prerequisites?

[@RivaanRanawat]

Flutter & Dart Basics

[@agasobanuyerockykirabiranya]

Anyone here please help. Is this building a Twitter clone app that one can launch? or it's just educating

[@RivaanRanawat]

Hi! Sure, you can launch this app but I haven't covered the "deploying server" part. You can refer to either of these blogs for it: - www.linode.com/docs/guides/getting-started-appwrite/ - marketplace.digitalocean.com/apps/appwrite

[@user-jv4fr4qz7g]

Hello fellow flutter programmer, I encounter a small error where when i sign up is pop up a error said "type null is not subtype of type list", which it doesn't navigate to the login page.

[@bishawjitdas]

@user-jv4fr4qz7g did you able to fix this error related to the login issue. I am facing this issue too.

[@voobryan5979]

@@bishawjitdas I am able to login and sign up, but i unable to navigate from sign up to login and when refresh phone, it wouldn't navigate to home page. Hopefully, someone can help us

[@user-jv4fr4qz7g]

@@bishawjitdas I think i fixed the error already. I did was reinstall appwrite to the newest version. Cause before i use the newest version, i was using the version mentioned in the video. hope this help

[@AbcDef-gm2ty]

3:15:06

[@binhlethai3272]

1:42:00 iam trying but connection refused

[@DinhcongmenhklBlogspot]

I decree and declare this prayer over my life, my children's and grandchildren's lives in the precious and mighty name of Jesus Christ our Lord and Saviour. Amen 🙏 ❤

[@asakwagh612]

Please am 17 years from Ghana. I want to learn to code where should I start from. I

[@davthecoder]

you can start right here. follow the code and practice, practice, practice. :)

[@asd99579]

English please

[@miladt9605]

Accent 😐😐😐

[@hamidulloh07siddiq26]

i dont like indian accent

[@beatx2173]

FO then

[@living_alien]

I don't like bangladeshi accent

[@duartelucas5746]

The code just looks super ugly lol

[@mahendranath2504]

Thank you so much for awesome and valuable content 👋👍👏👌🙏🏻🥳🎊🎉🫡🤝✌️