Flutter with Firebase Backend Project - Full Stack Tiktok Clone App | GetX

Use Flutter, Firebase & GetX to Build Full Stack TikTok Clone.
Source Code: github.com/Riv...
Features:
- Authentication with Email & Password
- Uploading Videos with Caption
- Compressing Videos
- Generating Thumbnails Out of Video
- Displaying Videos with Caption
- Liking on Posts
- Commenting on Posts
- Liking the Comments
- Searching Users
- Following Users
- Displaying Followers, Following, Likes & Posts of User
- TikTok Like UI
Time Stamps:
(00:00:00) Demo
(00:03:26) Prerequisites
(00:03:36) Setup
(00:06:38) Login Screen UI
(00:20:49) Sign Up Screen UI
(00:25:59) Authentication Logic
(00:30:07) Firebase Setup
(00:44:44) Creating User Model
(01:02:01) Persisting User State
(01:06:54) Bottom Tab Bar
(01:15:29) Add Video Screen
(01:23:26) Confirm Video Screen
(01:32:34) Uploading Video
(01:52:53) Displaying Videos
(02:15:24) Add Video Controller
(02:23:44) Liking Posts
(02:28:19) Commenting & Liking Comments on Posts
(02:59:00) Search Screen
(03:11:31) Profile Screen
(03:48:42) Conclusion
Links:
Colors: github.com/Riv...
GetX: pub.dev/packag...
Firebase Core: pub.dev/packag...
Cloud Firestore: pub.dev/packag...
Firebase Auth: pub.dev/packag...
Firebase Storage: pub.dev/packag...
Time Ago: pub.dev/packag...
Video Player: pub.dev/packag...
Video Compress: pub.dev/packag...
Image Picker: pub.dev/packag...
Cached Network Image: pub.dev/packag...
#flutter #firebase #getx

[@FlutterMapp]

Nice tiktok clone Rivaan 🔥🙏

[@RivaanRanawat]

Thank you so much Louis!

[@muttalipatasayar]

The sample apps are amazing. I look forward to the continuation. Don't give up, we are with you.

[@RivaanRanawat]

Thank you so much! Definitely won't give up 😉

[@flutterdeveloper]

This content is more valuable than paid courses Thank you so much

[@RivaanRanawat]

Thank you so much!

[@mikelmarion]

@@RivaanRanawat Rivaan, is there a way to request a video or how to build from you? Do you have A Twitter account? A email address? A tik tok? A fiver account? There’s 2 type of sites/apps I’d like to know how to build

[@MuhammadIbrahim-qz1nu]

00:01 Full stack TikTok clone built with Flutter, Firebase, and GetX. 02:25 Demonstration of following and unfollowing users and video compression for Firebase storage 06:49 Implementing MVC architecture in the Flutter app. 09:02 Styling and arranging elements for the Tiktok clone app 13:41 Setting up email and password controllers 15:52 Creating custom styled button using Container widget 19:55 Adding functionality to buttons and text using InkWell widget 21:54 Adding extra input fields and circle avatar for image selection 26:01 Creating Auth Controller with GetX Package for Logic Separation 27:53 Setting up Firebase backend with Cloud Firestore and Firebase storage. 31:57 Configure Android app with Google Services.json for full functionality. 33:58 Setting up Firebase SDK in Flutter app 37:51 Integration of Firebase and Firestore 40:03 Processors are asynchronous in Flutter with Firebase backend 43:56 Saving and retrieving data from Firebase Firestore 45:50 Creating user model and importing user from Firebase Auth 50:07 Create static auth controller named instance 52:22 Implementing image picking and showing successful message 56:41 Setting up necessary keys for photo library, camera, and microphone usage. 58:45 Creating a login function with email and password 1:02:50 Maintain app state for logged-in users 1:04:53 Set initial screen based on user status 1:09:02 Creating a size box with specific dimensions and layout 1:11:24 Customizing bottom navigation bar in Flutter with Firebase Backend Project 1:15:14 Creating an add post functionality in the Flutter app 1:17:19 Creating options dialog for video add functionality 1:21:40 Handling video selection and compression in the app 1:23:37 Setting up video player and controller 1:27:53 Setting up controllers and input fields 1:30:17 Passing video path parameter for video changes 1:34:07 Obtaining user profile information for efficient video display 1:36:16 Uploading video to Firebase storage with compression 1:40:08 Uploads video to storage and compresses it behind the scenes 1:42:13 Creating a function to get the thumbnail and upload video to Firebase storage 1:46:16 Creating and saving video data in Firebase with Flutter 1:48:25 Uploading and displaying content in Firestore database 1:52:34 Creating a video screen with various components 1:54:31 Creating a custom video player item widget 1:58:34 Implement dispose method for memory leak prevention 2:00:32 Creating the UI layout in Flutter with specific alignments and styling. 2:04:47 Creating a fixed size box with child elements 2:06:56 Creating a column layout for displaying elements 2:10:58 Setting up animation controller in Flutter with Firebase Backend Project 2:13:05 Creating a box with decoration and image 2:17:16 Mapping and storing video snapshots in a list 2:19:13 Import video controller and utilize get controller in GetX. 2:23:18 Implementing like functionality in the video controller 2:25:19 Handling likes and dislikes in the Tiktok clone app 2:29:21 Implementing comment box in the comment screen 2:31:25 Adding profile photo and comment section with customization options. 2:35:32 Setting up input decoration for comment section 2:37:52 Creating Comment Controller and Model in Flutter with Firebase Backend 2:41:50 Creating comments and retrieving user data. 2:43:48 Implementing commenting feature in the Tiktok clone app 2:48:04 Updating comment count in Firebase Backend 2:50:06 Displaying all comments in the Tiktok clone app. 2:54:21 Adding spacing between comments and updating like counter functionality. 2:56:24 Updating likes property in Firestore 3:00:29 Troubleshooting and implementing search functionality. 3:02:31 Creating search functionality for users using Firebase query 3:06:39 Implementing search feature and displaying search results 3:08:41 Implementing username search and profile screen navigation. 3:12:49 Creating user icon and username text with styling 3:14:47 Utilizing Cached Network Image for Faster Image Loading 3:18:57 Designing UI elements with specific styling and content 3:21:07 Implementing click functionality for follow/unfollow feature using InkWell widget 3:25:19 Adding thumbnails, user data, and video details 3:27:26 Implementing likes and followers in Firebase backend 3:31:41 Creating a profile screen with GetX builder 3:33:53 Setting up user details in the Flutter app 3:37:50 Implement sign out functionality in the auth controller 3:39:49 Implementing user follows and unfollows logic 3:43:40 Updating user following and deleting documents 3:45:28 Creating a grid view builder on the profile screen

[@RivaanRanawat]

20 Hours Dart & Flutter Full Course - kzbin.info/www/bejne/eau1gmyjo9KbapY 10+ Flutter Projects for Free: kzbin.info/aero/PLlzmAWV2yTgCjoZNF3hLX3puYJir9vSQO Discord Server: discord.gg/Q8Rx8YWFVF

[@habeshamix807]

First of all I want to say you sir are the best!!! you're helping me to be great developer! and please can you make an uber eats clone or some kind of food ordering app pleaseeee.Thank you

[@RivaanRanawat]

@@habeshamix807 Thank You! A Food Delivery app is coming soon 😄

[@coclegends2015]

The efforts you put in is commendable!

[@RivaanRanawat]

Thank you!

[@SakshamKarnawat]

Amazing work, again!! Would love a clone with Riverpod state management.

[@RivaanRanawat]

Already in my To-Do List!

[@techview1196]

No other KZbinr does it as good as you

[@RivaanRanawat]

Thank you so much!

[@flutterdeveloper]

This is true

[@RivaanRanawat]

@@flutterdeveloperThank you so much Jimmy!

[@yerdna1983]

@@RivaanRanawat hello, there IS no need to check auth on every page? IS this approach ok?

[@RivaanRanawat]

@@yerdna1983 You don't need to check auth on every page, that sounds like a lengthy approach. This method is simplistic and an efficient way to persist user state!

[@TechnoDB]

Clear, To the point. 🔥 Valuable content. Thanks, Rivaan

[@RivaanRanawat]

Glad you found it helpful!

[@adamtechnology3204]

Your code is improved, I followed half of instagram code and compared to these map structure of this vid, it has been MVC style now. and more organized, also creating the instance is done once now in constant.dart, good job! and you are very clear and nice to follow. If you are Muslim, may Allah bless you and reward you, if not: may Allah Bless you with Islaam.

[@RivaanRanawat]

Thank you!

[@talismangaming7496]

hey Rivaan just wanted to let you know I am 37 years old and now learning coding all by myself as a hobby. Your videos are a true university to me. Could you please make a tutorial of youtube clone with backend.

[@onyemaanthony]

Kudos 👍 I like the idea that you are using different state Management for your builds keep it up bro

[@RivaanRanawat]

That's the plan! Thank you so much!

[@onyemaanthony]

Ur welcome,am requesting that when you have time please complete that WhatsApp clone and connect it to firebase and implement at least one to one chat

[@yantech.4249]

Wow! you one of the best teacher here on KZbin. I learn a lot from your channel. Big Thanks bro. By the way, you make me a great developper. Can you make the AirBnB Clone App! 🤗

[@ricard458]

I hope I have time to watch your video next weekend. :)

[@RivaanRanawat]

Haha, thank you so much!

[@shrekview5820]

Hats off to you for providing with such excellent content absolutely for free!!!!!

[@RivaanRanawat]

Thank you so much!

[@Hassan-mv2eu]

Man! You're Amazing. Please Keep Making these types of App Clone Projects. Also Can You share your App Creation TO-DO List. Which App is coming soon. Im waiting for your reply. THANKS ALOT.

[@RivaanRanawat]

Thank you so much Hassan! There are multiple apps on my To-Do List, some of them are Typeracer Clone, E-commerce App (with Admin Panel), Spotify Clone, Snapchat Clone; all of them using a bit different technologies!

[@ak-up8fg]

@@RivaanRanawat thank you can't wait for spotify clone

[@ripattan7385]

Good tutorial for learn flutter with getx and firebase implementation in 2022, thank you.

[@RivaanRanawat]

Glad it was helpful!

[@ChristianGarcerant]

This is pretty accurate, you saved me a lot of time, Thanks! greetings from Colombia.

[@laurens.7510]

I am a non-technical person (a nurse). I started to hire a developer for an app idea and I wanted to find out if a Flutter developer can make a short video app with only the front end? I thought you must have backend and Firebase? This is an mvp.

[@RivaanRanawat]

Absolutely! Instead of uploading and fetching videos from database, one can have hardcoded data put into the app

[@wasibhussain]

Hats off to your efforts for creating such an informative tutorial ❤

[@RivaanRanawat]

Most Welcome Wasib!

[@explodestudios]

You should consider building a spotify clone as well! Love the vids!

[@RivaanRanawat]

Thought about it but Spotify's API doesn't allow playback until we have Spotify Premium.

[@hypergamer8540]

I have some doubts like.... 1. If we are using getx as State management why you are using setState() at some places. 2. Also we are making controller for each feature so why you are writting methods like pick video.on ui side. Is not it possible in controller class. 3. As.we are using getx as state management which already provides us navigation routing so why you are using stuffs like.navigator. push

[@VinayakRajVardhan]

Good one kindly make clone videos with bloc and provider also. Amazing keep the good work.

[@RivaanRanawat]

Definitely!

[@terlumunjoseph6779]

your videos are one of the best you make it easy for beginners to understand please consider making an ecommerce app in the future

[@RivaanRanawat]

E-Commerce App using Flutter is coming soon 😄

[@dilippatel6018]

Great work rivaan

[@RivaanRanawat]

Thank you Dilip!

[@gojo628]

Another great work, can you please elaborate more on state management (for a noob). And BTW a reddit clone next please, especially the subreddit part and how you allow users to post content along with admin privileges and also allows users to create their own subreddits.

[@RivaanRanawat]

I'll be dropping in a few videos on various state management tools for beginners, don't worry about that! I've started my work on a few videos already, and reddit clone is in line!

[@RivaanRanawat]

Reddit Clone is live!

[@adisonmasih]

@@RivaanRanawat really glad to see you remembered this comment!

[@aimeneharbi3913]

The best i leam a lot of from u and your writing method is so production i like it 🤩

[@RivaanRanawat]

Glad you think so Aimene!

[@zanemartini7178]

The video is not displaying on the screen and neither voice is coming from the video. Error is :- 'IMGEGLImage is not consistent '. Although video data is properly storing in firebase but video not displaying. Need help.

[@mdnazmulhossain2916]

Same problem

[@ArjunAR06]

Rivaan, at 2:27:30, when i try to like it shows, "Null check operator used on a null value", My terminal : Unhandled Exception: Null check operator used on a null value E/flutter (29201): #0 VideoController.likeVideo (package:reels/controllers/video_controller.dart:24:19) E/flutter (29201): Help me

[@ibaadmurudkar844]

Video Player package is not Working on Android Emulator try using on IOS

[@mersalalleddawi3294]

did you find the solution ?

[@ukohvincent3895]

You did this for free. You have your reward. May you increase. Thank you.

[@RivaanRanawat]

Thank you too!

[@quentinrime1271]

Great work, thanks Rivaan! Regarding the messages functionality do you have a tutorial to set it up available somewhere? Looking forward to discovering more of your tutorials.

[@RivaanRanawat]

Yep, Whatsapp Clone might help you there. Live on the channel!

[@TimothyChinedu-lk7rt]

​@RivaanRanawat hello rivaan. Please how do I implement the WhatsApp tutorial you did into the message function in the tiktok clone

[@m45t3rmindnmn4]

This is amazing dude!😄

[@RivaanRanawat]

Thank you!

[@richardosah9166]

You really made coding so easy bro please keep it up my mentor. Could you please made tutorial on firebase security rules . it will be very helpful for we the beginners. Thanks.

[@nakshatrasemwal4050]

hey rivaan i am getting this error again and again i followed same to same and still its giving me this error No App Check token for request. and the data doesn't get stored in the firebase storage

[@irfanganatra537]

Great tutorial i got success to make the same even added some more functionalities like user can delete its own post videos but here i would to suggetst use random id for adding videos...bcz if we implement with delete it might get complicated sometime, so video id should be not in sequence..like after deleting some videos we have only two videos with id : 1 and id:2 , so now adding video will replace 2 based on this video tuturial code

[@prashantbhardwaj7627]

after using _compressVideo() , video size in the storage bucket is increased in comparison to the original file, instead of decreasing. Please tell me how to fix this!

[@sagar7929]

I like the way you teach, but Instead of getx using another package like riverpod, provider, bloc, etc. Thank you and teach us more logic concept🙏🏽

[@RivaanRanawat]

Noted! Thank you for your suggestion.

[@sagar7929]

@@RivaanRanawat thank you and you doing great and I am learning more😊🙏🏽❤️

[@Rade34]

God for newbie developers like me!!! Superr Thanks!

[@RivaanRanawat]

Happy to help!

[@ArjunAR06]

when i comment , 2:50:20 it shows "Null check operator used on a null value", it shows that in this line in video_controller: if ((doc.data()! as dynamic)['likes'].contains(uid)){ Please help me

[@RivaanRanawat]

Are you still facing the error?

[@ArjunAR06]

@@RivaanRanawat yes

[@ArjunAR06]

@@RivaanRanawat same error when also liking videos bro, when I comment the comment is showing up in the screen, but the comment count doesn't increase, same problem when liking videos

[@ArjunAR06]

@@art3dude no bro

[@anjalycv9713]

I'm also facing the same problem

[@fxyong]

great video! which version of flutter is this build on? Any null safety checks?

[@juniorMr]

The best flutter chanel

[@macaulayfamous7981]

Hey bro thanks so much , but please I have a little issue after wrapping with Obx no data is displaying on the video screen including the video how to I sort this out please

[@ismoilazamov7974]

I am also having the same issue. Did you solve this? If yes, how

[@flutterwithfsd]

Keep The Good Work ❤️

[@RivaanRanawat]

Thank you!

[@Y45h007]

I'm at 58:13 right now, for me I can see the registered users on the Authentication tab in firebase but there is no collection for users in the firestore database. Also, when I register a user I get a snackbar error from the catch in the auth_controller.dart saying there is an unknown error and to check the server response. How do I fix this?

[@xavieradam2060]

i have same issue man are you find a solution

[@renestavnes]

This is an excellent tutorial. Thanks so much for your effort! There's one thing I wonder, though. How come the real TikTok app can load videos so fast, while our clones are rather slow in this respect. Is it because they use Content Delivery Networks, or becsuse of extensive buffering by their videoplayer?. Or could there be other reasons? I know the clone is just a bare mimimum version when it comes to back end resources. However, I'd appreciate to hear your thoughts.

[@RivaanRanawat]

Hey René, thanks for this question! Apologies for the delay in answering! In my opinion, TikTok can load videos faster than the clones because of their CDN but that's the case with any standard video player and can be configured pretty easily. I feel it has to do more with caching and buffering. As you mentioned, we are completely downloading the video (Can be seen when the user gets no buffering after the video has started playing). Instead, tiktok downloads a small amount of file, let's say 5mb and then when we play, it downloads file according to file length. I think it also has something to do with transmuxing as it lowers internal traffic and reduces load on the storage server. All of which results in more efficient video streaming. Speaking of this clone, we can make sure this app loads faster as well using PreloadPageViewBuilder, this will ensure that some number of videos(the number we mention) load up In the background while we are viewing one video. Hope this answer helps you, let me know if I've said something you disagree with, would love to know And have a discussion! Again, thanks for the question, pretty interesting one!

[@renestavnes]

Thank you for your reply, Rivaan. And for putting me on the right path! I will aim to try out your suggestions in my own implementation, however, due to my inexperience I'm humbly asking for some further guidance. :) The PreloadPageView.builder seems to be the lowest-hanging fruit, so that I can implement. When it comes to gradual downloading (stream)... do you know how to go about? Is it the VideoPlayers's job to achieve this, or is there a need for backend code (somwwhere between the app and the storage bucket)? Also, do you know how to go about when it comes to transmuxing? Can it be achieved solely from the frontend, or is backend code needed? Any guidance is hightly appreciated. I'll of course let you know the outcome.

[@letslicious]

@@RivaanRanawat any chance to build a short tutorial with PreloadPageViewBuilder?

[@ProjetosFlutterflow]

Hello friend, I'm Brazilian and I've been watching your videos. I have a question... Is it possible to import the code from your futter project that is on github into flutterflow?

[@_juniormastermind_]

It's an excellent tutorial sir :) Please make more projects with flutter and dart.Please make a wallet app with flutter,dart and firebase with so many advanced features and social media app like facebook

[@RivaanRanawat]

Already made Instagram, TikTok and WhatsApp Clones with Flutter & Firebase (which will sum up the main features of Facebook) You can find them on the channel ;)

[@_juniormastermind_]

@@RivaanRanawat thank you so much sir :)

[@AbdulSalam-nr9kw]

Very nice tutorial, salute to your efforts please make a video on firestore rules.

[@RivaanRanawat]

Thanks Abdul. A video on Firestore rules is in the video list for a long time. I'll start my work on it soon.

[@hensallz]

Great tutorial but I often got an error "Unsupported operation: Platform._operatingSystem" and the data will not be stored in the collection when I try to upload photos or videos. I think it will be better if you make a video related to uploading images, and videos on the web using flutter. Because it doesn't support your code on the web.

[@hossamTTV]

Great video bro, it will be great if you made a video about the chat section.

[@RivaanRanawat]

We already have WhatsApp Clone tutorial published on the channel

[@hossamTTV]

@@RivaanRanawat yeah bro I saw it, it was amazing. But it has a different method for chatting

[@Sanatani10810]

if anyone getting error after adding video compress package then add allprojects { repositories { jcenter() } } in android build gradle

[@maxairop]

Hey bro thank you so much for this i was getting this problem but now it is solved❤ Thanks❤

[@truonghuyhoang]

sir, when i load a video that i have downloaded from tiktok, it fails to upload, a message appears: 'null check operator used on null value'

[@truonghuyhoang]

With videos captured by the device's screen or camera, it works fine. Why is that?

[@truonghuyhoang]

it looks like there is an error in the compression function. if you don't use compression then everything is fine

[@RivaanRanawat]

Yep, recently there have been many errors because of video_compress plugin. Solution would be to remove the plugin until the authors update it.

[@findmusic1560]

null check operator used on a null value sir please fix this problem

[@RivaanRanawat]

Can you please send your terminal output?

[@habeshamix807]

@@RivaanRanawat it seems like this is everyone's problem. Didn't you find a solution to fix it yet??

[@cabdiraxmaanmacalin6485]

here we go you are great and i hope i will more about you

[@RivaanRanawat]

Thank you so much!

[@ahmadjarouche7474]

User [Firebase_Storage/object-not-found]No object exists at the desired reference shows up as a snackbar on my phone anuone pls help, and also when i check the firestore database the users are not showing

[@champa2349]

Hey Rivaan I am currently getting error , when I upload the video and add the caption and song name and click on share button , it shows the error message in snack bar regarding type null is not a subtype of type of string firebase times stap 1:50:00

[@soumyadeeppaul4714]

bro same

[@soumyadeeppaul4714]

did you find the solution

[@lalitbisht8381]

I also got this error 1) Delete all your users from fire base Create new user through our App only which has username in it Make sure to have username Now your error will be solved

[@harshalsawant29]

For all those getting storage exceptions - just add storage to your firebase project and it will work fine.

[@RivaanRanawat]

Thanks for sharing the fix, Harshal!

[@victoriavalensitar8003]

hello, i have error on search screen final SearchController searchController = Get.put(SearchController()); do u know how to fix it?

[@dhanuzh.d]

keep on rocking bro

[@RivaanRanawat]

Thank you so much Dhanush!

[@habeshamix807]

Am having this error please I need your help..."Null check operator used on a null value".....pleaseee help

[@RivaanRanawat]

Can you please give details about the error?

[@habeshamix807]

@@RivaanRanawat the error occurs whenever I try to upload a video and when I navigate to the "profile screen".

[@geekywahab569]

Amazing made my day

[@RivaanRanawat]

Glad you enjoyed it!

[@burakertasdev]

Hey Rivaan. Thanks for this video. Couldn't complete the course, cause have an issue at 58 min when you first register. It gives a firebase exception that says [firebase_storage/object-not-found] No object exists at the desired reference. There is no code error I look at up and the rules are too. Can be there problem with the firebase package version. I have now 10.1. Thanks a lot :)

[@burakertasdev]

fixed the issue I did not setup Storage :D thanks again

[@RivaanRanawat]

Awesome, thanks for sharing!

[@bonlacorte1461]

@@burakertasdev my brother, how did you setup the Storage? can you please give the ways that you did? or give the timestamp on the video (if the solution is on the video), I think I missed some steps

[@burakertasdev]

@@bonlacorte1461 you must do the samething that we did in cloud firestore. click to Storage in firebase console there must be "get started" and do the setup, go to rules set it like we did in cloud firestore. the video did not show the Storage side but its the same.

[@victoriavalensitar8003]

helloo did ur search screen working just fine?? because i found an issue on this part final SearchController searchController = Get.put(SearchController()); do u know how to fix it?

[@asadullahanwari5135]

I am facing an error on 1:51:50 while uploading a video, it says Null check operator used on a null value!

[@RivaanRanawat]

What device are you using to test the app?

[@ArjunAR06]

@@RivaanRanawat does it depends on device we use?. If so what should we do to make it run on android devices

[@asadullahanwari5135]

@@RivaanRanawat android

[@asadullahanwari5135]

@@RivaanRanawat and can u please add a video of inbox screen. U didn’t complete it in this video or at least upload its code on ur github. Tnx

[@architsharma7302]

Have you got the solution to this issue ? I am currently facing the same issue ..

[@marinavalero7893]

thanks for the great work, Rivaan. Could you please share the extensions you use to wrap text? I am not really sure how you access that display shown in minute 17:48

[@RivaanRanawat]

If you press, cmd+shift + r or right click then click on refactor option, you'll get this option

[@kishansindhi5181]

Ek number 💪💪

[@RivaanRanawat]

Thank you Kishan!

[@isaackaranja9802]

Great video. Thank you.

[@RivaanRanawat]

Glad you liked it!

[@szyszak9424]

are you planning to make a course on udemy? Making such big project with explaining eveyrthing in details would be amazing.

[@RivaanRanawat]

No plans of exclusive Udemy Course yet. As of now, whatever course I build will be put up on YT. I will try to include some complex app in a Flutter Beginners Course where I explain everything from scratch.

[@mahendranath2504]

Thank you so much 👍🙌👌❤

[@RivaanRanawat]

Welcome!

[@satyamshukla2389]

type '_Uint8ArrayView' is not a subtype of type 'File' this is tht error I am getting when uploading the video to firebase storage. Note the video is getting uploaded to storage but getx snackbar is giving this error TimeStamp - 1:31:00

[@uminhtetoo]

Thank you so much for sharing, Sir.

[@RivaanRanawat]

Most welcome!

[@yantech.4249]

Hey Bro, Thanks again for this amazing tutorial. Can you add a chat functionality here. That will be awesome.

[@RivaanRanawat]

Thanks! We've already got a WhatsApp clone app on channel, you can check that out - might help.

[@tr-dg2iy]

running on android device, and uploading video works well, but running same code on ipad and get error "null check operator used on a null value" (both when recording video from camera, or uploading a video already stored in the device). thoughts? i saw from an earlier comment, temporary solution could be not using video_compress plugin. also, are you available for hire at upwork? thank you for taking the time to do this tiktok clone video!

[@techbilldeaf]

I am looking for TikTok clone where users can leave few minute video comments under each vlog post if they wanted. Reason is that all my user will be Deaf or hearing with sign language skills and we want to be able to leave comment in sign language instead of texts. Does this program teach us how to code where commit will accept videos? Also, is there a way to do websites along with the mobile apps? Thank you!

[@RivaanRanawat]

That's a wonderful feature. Unfortunately, this app doesn't contain that. I think now you can convert this app to website easily, all the packages used might have been upgraded to support web.

[@techbilldeaf]

@@RivaanRanawat Thank you for replying and the suggestion.

[@RivaanRanawat]

@@techbilldeaf Pleasure🙂

[@MrCamdere]

Bro i got this error when im trying like : [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: Null check operator used on a null value E/flutter ( 2564): #0 VideoController.likeVideo package:tiktok/controllers/video_controller.dart:32 .. How to solve this issue ?

[@raber5]

Hi, excellent video thanks for sharing!, when you scroll, only the one that is being shown is reproduced and the others remain in detention?

[@RivaanRanawat]

Yep, that's how ListViewBuilder, PageViewBuilder work. They implement lazy loading - load on demand.

[@ashwinigupta6480]

Overall a great tutorial ! but there are some issues with the code like in the sign up page the image picked not shown in the UI and some other stuffs also but great work bro ❤❤👌👌👌👌

[@RivaanRanawat]

Thanks! Happy you found some value from it!

[@ashwinigupta6480]

@@RivaanRanawat I go through from this tutorial for learning about Getx . This provides me the basic idea which was good for me.

[@tharoseth8064]

Amazing man

[@RivaanRanawat]

Thank you so much!

[@ritikdwivedi21]

xecution failed for task ':video_compress:generateReleaseRFile'. > Could not resolve all files for configuration ':video_compress:releaseCompileClasspath'. > Could not find com.otaliastudios:transcoder:0.9.1. Required by: project :video_compress Please fix this issue. I am trying to build app for android

[@LeHOANGLONG-BDCCN]

any solution you have found?

[@anasalbattiri003]

any solution you have found? +1

[@sarathrkrishnan6610]

Superb bro. Next Can you create an app contains google maps . some thing like uber, uber eats, zomato, swiggy etc....

[@RivaanRanawat]

An app like that is already in line😄

[@telugucomedyclub-2.067]

Bro can you help me. The course is very well but can you help me in displaying videos section. By displaying videos every time same videos are getting displayed but after viewing one video after reopen if the app the video should not be shown again it should be somewhere elsewhere. The videos need to be updated every time. And a separate panel of videos for following

[@blacksionman]

Hi Riv, cheers so much for the tutorials, issue i am having on android when doing the upload is: D/CCodec (18720): client requested max input size 569, which is smaller than what component recommended (8192); overriding with component recommendation. query failed after returning 14 values (BAD_INDEX). Any ideas?

[@vishaldrajpara5343]

Sir when I try to upload video in firebase storage dart gives me error that : "type 'null' is not a subtype of type 'map' in type cast". Help me to fix this issue. Thank You:)

[@RivaanRanawat]

There was in issue with Firebase Storage some days ago, now it's fixed. Does it still give this error?

[@eletronicas_da_hora]

@@RivaanRanawat yes

[@mnouman1552]

Please explain the CRUD functionality of firebase with flutter.Just a seperate video for the CRUD operations...

[@RivaanRanawat]

Alright, will be up soon!

[@mnouman1552]

@@RivaanRanawat I'm facing difficulty to understand the flow of firebase CRUD operations.And I hope you still remember my NestJs request...

[@RivaanRanawat]

@@mnouman1552 Sure, I'll make a video on it trying my best to explain and yes, I do remember your Flutter + Nestjs Library App request.

[@Entwined_production]

This is an absolute an amazing tutorial. If I want to make sure we didn't have duplicate users on registration how would that be done?

[@RivaanRanawat]

Thanks Matthew! You can send a request to users collection in Firestore with a query checking if the username of the user matches with the username typed in the textfield. The query will be something like this: final userDocument = await FirebaseFirestore.instance.collection("users").where('username', isEqualTo: usernameTyped).get(); if(userDocument.exists) { // username already in use }

[@Lil-Undercover]

Thanks bro for this wonderful tutorial Please am getting this error when am uploading some videos, not all video, it says null check operator used in a null value please help

[@toannguyentat2802]

At Step Create Extensions Pubspec Assits, i have selected Pubspec Assits: Add/update dependencies but it notification Error "Pubspec file not found in workspace root. Open the pubspec file you would like to edit and try again." Pls help me , How to extensions activity.

[@RivaanRanawat]

There's no need to use Pubspec Assist now. You can directly type "Add/Remove Dependencies" in VS Code. And it will work fine.

[@BrYarDJ]

this is amazing, i hop creat course

[@RivaanRanawat]

Glad you like it!

[@seamensclubltd7603]

Huge thanks!!

[@RivaanRanawat]

You're welcome!

[@xavierodonoghue]

For anyone having the problem of seeing the profile screen from the previous user when logging in multiple times. Adding this method to your constants file and calling it in login function fixes it void updatePages () { pages[4] = ProfileScreen(uid: authController.user.uid); } but it still doesn't clean the state managment as suggested.

[@victoriavalensitar8003]

i have a problem on search screen on this part final SearchController searchController = Get.put(SearchController()); do u know how to fix it?

[@BookBehindTheMovie]

Thanks for your efforts, but where is the share feature?

[@stps7986]

excellent! Could you also teach us how to add in the live stream and virtual gifting feature?

[@RivaanRanawat]

Live Stream feature can be taken from my Twitch Clone Video. Link: kzbin.info/www/bejne/i2q8fI2oeb1jebM I'll try to make a short tutorial on virtual gifting feature🙂

[@stps7986]

@@RivaanRanawat awesome! Thank you sir! :)

[@KnowledgeWorld-LetsLearn]

Thanks a lot for this video. Really well explained. I have one problem. When i run my flutter app, it keeps loading at "running Xcode build" for ios and i tried all possible steps to stop it but it doesn't work. So can u please tell me some solutions to solve this problem else i can't test my app for ios devices.

[@RivaanRanawat]

Hey, during this app build, even I faced this problem. It stuck on "running XCode build" but finally loaded after 10 minutes (I'm using M1 Mac). So, waiting might solve this problem but if it doesn't load up after an hour or so (maximum) try running "flutter clean" and then run the flutter app. You can even check this out: github.com/flutter/flutter/issues/48963

[@waqarali-ri4sj]

brother there is 1 command to decrease build time and try to build ios first from xcode it must solve your problem

[@zzz.1777]

Why do some widgets like text need to have a const beside them and some don’t? I’m a beginner to flutter

[@RivaanRanawat]

If you use const, it means that that particular widget won't rebuild even if the whole widget tree is rebuilt. For example, if you have a simple login screen, you call setState when a use clicks on a button to display loading indicator. The whole widget tree in that class will rebuild. That's not ideal because unnecessary rebuilds affect the performance of the app. Thus, const gives us the ability to prevent those unnecessary rebuilds for certain widgets of the widget tree. Note that you can use const for any widget that doesn't depend on the state of the class. Let me know if you have any questions!

[@yashwardhangautam8814]

Do make one for some e-commerce apps too

[@RivaanRanawat]

Already in My To-Do list!

[@KnowledgeWorld-LetsLearn]

Can i integrate this video sharing features in the instagram clone which you made in your previous video?

[@RivaanRanawat]

For sure! It'll be really cool to see what comes out of it!

[@shashinaik8476]

In profile screen when i tap on a thumbanail how can i get the video, i.e. the thumbail generated from...please help me...im struct at this point

[@shashinaik8476]

dude give a reply man im waiting for your reply when tapping on thumbnail of a video from profile screen how can i fetch that video and play that video in video screen

[@RivaanRanawat]

When you tap on a thumbnail, you are able to get the id of the video. Using that id, you can again go to the video collection and access that particular video document by using that id. Then, you can access the videoUrl property on it. Hope that helps!

[@shashinaik8476]

@@RivaanRanawat how can i get video id that's my question in profile screen , controller has used on user model class, but in user model class there is no field named thumbnail in firestoredatabse, please help little more with the code what should i have to use to get video id of thubnail and passed to videoscreen itemBuilder: (context, index) { String thumbnail = controller.user['thubnails'][index]; return InkWell( onTap: () { Navigator.push( context, MaterialPageRoute( builder: ((context) => VideoScreen()))); }, child: CachedNetworkImage( imageUrl: thubnail, fit: BoxFit.cover, ), ); }, thanks in advance man , lots of love from dubai💙, and big fat appreciation for your efforts 💟

[@shashinaik8476]

@@RivaanRanawat .

[@shashinaik8476]

@@RivaanRanawat its not working man it fetching the wrong videos, it fectching the video by index...not by a perticular thumbain video url..

[@ocofredacuriosidade]

Hi Rivaan, thanks for the great tutorial. I finished and it’s very good, I only have one issue where I log in with one user and the profile page shows the info of the previous user. I found another comment with the same problem and you mentioned that we need to clean the state management. To be honest I tried some different approaches but the issue persists, can you help me on fixing this?

[@jainamshah5653]

I also have the same issue but what I did was try Hot Restart everytime I wanted to configure the profile section but that is only a temporary solution and not a permanent one so maybe if we tried maintaining the profile page directly might help.

[@victoriavalensitar8003]

helloo, i found an error on searchscreen final SearchController searchController = Get.put(SearchController()); how u managed to fix it?

[@shashinaik8476]

Everytime app opens videos playing in same order, so my question is how to retrieve videos from firebase randomly..

[@RivaanRanawat]

Hey, thanks for the question. Hope this resource helps you: stackoverflow.com/questions/46798981/firestore-how-to-get-random-documents-in-a-collection

[@fluttertune443]

It's a great tutorial. What tools do you use to create this video tutorial?

[@RivaanRanawat]

Thank you! I use Quicktime Player for recording screen and Audacity to record voice.

[@nikhilkukreja8498]

Thank you so much 💯

[@RivaanRanawat]

You're welcome!

[@saurabhraturi7940]

In my app at the time getbuilder is called it it showing error screen for a brief moment before going to the page and saying null is not a subtype of type string. Anyone have a solution???

[@RivaanRanawat]

Just check if it is null, if it isn't display the widget tree, otherwise display a loading indicator.