Flutter Firebase Instagram Tutorial

Follow and Unfollow Users | Flutter Firebase Instagram Tutorial 2019 (Ep 8)

hey everyone welcome back to my channel where you learn how to create amazing apps with flutter and dart in today's video we're going to be continuing with

my flutter firebase Instagram series we're going to allow users to follow and unfollow each other let's start off by going into our profile screen dart and adding three instance variables the

first instance variable we're going to add is bull is following and we'll set that equal to false the next one is int follower account equals zero and the last one is in following count equals

zero is following is going to last check to see if we should be displaying a follow button or unfollow button when we search for a user's profile the follower count will be the number of followers

the user has and the following count will be the number of users a user follows right now if we go to our search and search for a user we see that there's an edit profile button and

there's a bug in the app right now we're if we click edit profile we can actually change the users data even though we're not logged in as that user so if we change Albert to Alberta and to save

profile we can see that we just updated Albert's name the way we're going to fix this is by creating a function that checks if the user profile or on is equal to the current user and if it is

then we'll show edit profile if not then we'll show a follow or unfollowed button according to the is following property let's scroll down to the button and we'll cut out the container we're gonna

write a function called display button which will take in the user and going back to the top will write the function display button user user and will just return what we cut out hit

save and now if we click edit profile here it still brings us to the screen so we know that our display button is working right before we return the button we need to do a check to see if

we're the current user so we can do user dot ID equals equals provider of context and make sure to add user data dot current user ID will put a ternary operator there and remember to import

user data and provider so if the current profile is not the current user then we want to return the follow or unfollow button so all we have to do is return another button we can just copy what we

wrote here and paste that in and now in for the unpressed we can remove the navigator dot push and we'll leave it empty for now for a color will check is following and if the user

is being followed already then we want the color to be colors dot gray 200 or colors blue so if it's the unfollow button we want it to be great if it's the follow button we

want to be blue for text color will do is following colors black otherwise we want it to be white and now for the text is following we wanted to say unfollow otherwise

follow and I'm missing a parenthesis here now if we look at our screen we see that we have the follow button let's head over to our database service start file and we'll add in our follow user

and unfollow user functions let's write static void follow user and this is going to take in a string current user ID and another string user ID current user ID is the current user and user ID

is the user ID of the profile that we're viewing let's take a quick look at our firebase database so the way following unfollowing users is going to work is that we're going to have a followers

collection and a following collection inside the followers collection we'll have the idea of a user and then they'll have a collection called user followers and inside user followers they'll have a

list of ID's which represent all the users that follow them and then for following we'll have a user ID and each user will have a user following collection which will contain documents

of all the user IDs that follow them and that's how we're going to keep track of how many users a users following and how many users a users being followed by let's write some comments here the first

thing we have to do is add the user to the current users following collection [Music] and then after that we need to add the current user to the users followers

collection and that's how we're going to manage following a user inside our contents not dart file we need to add the two other roughs final followers rough equals fire store dot collection

followers and the other rough is following rough fire store doc collection following now we can work on adding the user to our current users following collection following rough

document current user ID inside the following rough we're going to go inside to the current users document access their collection called user following and make sure you add quotes around that

and then create document user ID which is the user ID of the profile reviewing and then when you set data and set it to nothing so empty curly braces now for the second part we can do the same thing

but now for the followers rough dot document and now we want to access the user ID dot collection user followers that document current user ID dot set data now for unfollowing a user

it's very similar but instead of setting the data we want to remove the document if it exists so let's change follow user to unfollow user and then let's change the comments so the first step is remove

user from current users following collection remove current user from user's followers collection and now instead of doing set data we can do get and then do dot then we're gonna get a

document returned and all we have to do is check if the document exists and if the document exists then we just want to delete the document so we can do doc dot reference dot delete and now the same

thing for this one so dot get then paste that in and then we check if the document exists and if it does then we still eat it and now since we wrote those two

functions let's write three more we need to check if the user is following the user already so we're gonna write a function called is following user and that's gonna take in strain current user

ID storing user ID and that will be an async function now we can make it named by adding in the curly braces we also need to write two functions one to calculate the number of followers and

one to calculate the number of following so make static future hint numbers string user ID async and then the other one is future int num following stirring news right e4 is

following user we need to create a document snapshot will call it following doc and we'll make it equal to a weight followers ref document and we're going to access the user ID that we passed in

doc collection user followers dot document and we want to check if the current user ID exists so dot document current user ID get so we're going to the followers rough of the profile that

we're checking and then we're gonna check if the current user ID exists which means that we're currently following that user and all we have to do is return following doc dot exists

because if the following doc uses that means that we're currently following the user if it doesn't exist that means that we're not following that user for num followers we're going to have a query

snapshot following snapshot equals a wait following ref dot document user ID that collection user following doc get documents and then since we got the

number all we have to do is return following snapshot dot documents dot length and that will return the number of followers of that particular user for none following we can copy this and

let's change it to follower snapshot followers ref users followers and follower snapshot documents all linked and that does the same thing but this time for the user followers and world on

rating our database functions so if we go back to the profile screen let's write the functions that are going to allow us to set up this page and update the followers count the following count

and update the button here so underneath this we're going to an it state and here we want to set the state but since our database functions are asynchronous we need to make a separate method that's

async to call internet state because an in state cannot be asynchronous so the first one I'm going to create is called setup is following and this is going to set the state of our is following

variable and that's going to be async and here we're going to do pool is following user equal oh wait database service dot his following user and the first variable is going to be

the current user ID and you may think that we can do provider of context and then user data dot current user ID but the problem with this is that we can't access the context because we're inside

our net state and what happens is that when we load the profile screen we're gonna call setup is following and I'm going to try to pass in my context that does not exist yet because our build

function was never called and we can test this out right now so let's call setup is following and remember to pass in the other ID we need which would just be widget dot user ID in this case

and after that we'll set state is following equals is following user it save let's go back here we need to hot restart the app and if we click the profile screen we're going to see that

we get an error in the debug console and what this is saying is that we're trying to use a context that doesn't exist yet so what we have to do instead is actually passing the current user ID

into our profile screen so here we're gonna do widget dot current user ID and let's add a variable called current user ID and then the profile screen will take in this dot current user ID and this dot

user ID so now wherever we call profile screen we have to add in the current user ID so the first place we should go to is home screen and right here we'll have current user ID instead of

just calling this again let's just cut this out and at the top of our build method let's create final string per user ID and we'll set that equal to the provider and we'll pass in current user

ID current user ID the next place we have to go to is the search screen and we can search for a profile screen here and inside our build user tile we can paste in the provider user data then

past and current user ID provider of user data context current user ID and remember to import provider and user data and now if we hot restart the app and go to our profile screen

not going to get an error if we search for a user and click on them we also don't get an error back in our profile screen let's set up the two other functions we need we need to write setup

followers async and set up following async and we'll create a variable called hint use our follower count equals we'll wait database service dot num followers widget dot user ID and then we'll set

state follower count equals user follower account and for this one user following count equals await database service dot num following widget user ID set state following count equals user

following count and it's safe and remember to call these functions inside our net state the reason we're separating all of these set States into their own functions is because they're

all async and if we put it all in one function what would happen is that we would have the bull is following user this would run first and then once that's finished the next part would run

so we could calculate the user follower account and after this finishes we would calculate the user following count the set state would be delayed because we're waiting for each one of these to finish

and then we're setting the state but by putting them into separate functions and then calling each of them internet state these are all firing at the same time so now if we go to the profile they're all

going to fire and they'll update with minimal delay compared if they were all on the same function going one after the other and I just remembered that we have to update the following followers count

down here so for followers we're going to want to have follower account dot to string then down here you want to put following count not to string so now if we refresh the app and go to our profile

we're going to see that our followers and following account or equal to zero let's write the method to follow or unfollow user so if we go back to our display button and we left this on deep

before but now for the on pressed we can write a method called follow or unfollow and above this will create that method follow or unfollow if is following then we want to call the method unfollow user

otherwise if we're not following the user then we want to follow the user for the unfollow user method we can just write database service dot unfollow user so that's the method we wrote before and

that takes in current user ID widget current user ID and the user ID is widget dot user ID and after that we need to set state so we'll set is following equal to false and then we'll

subtract the follower account button – – so then if we're on the page it'll update and then for the follow user let's copy-paste this and just delete the un– and change

follower to following and in this case one asset is following to true lets it save hot restart the app and now if we go to our profile we see that we have the edit profile button and let's

quickly go to the edit profile actually and inside the submit function I forgot to add a check for is loading so we just have to check if the profile is not being updated and if it's not

being updated then we can update the user in the database before we're able to span this button which if we added a new profile image and span the button it would add a bunch of photos but by

adding this check here it prevents us from saving the profile multiple times let's go to the search screen and let's type in a user let's go to Alberta and now if we click follow we see that

the button changes to unfollow which is intended but the following count went 2-1 and that's not what we want we want the followers count to increase by one and when we click unfollow we wanted to

decrease by 1 so unfollow is working because the decremented followers so we go back to a profile screen the error is in fall user and all we need to change is following to follower count plus plus

it's saved and let's go back into alberta now if we click follow we see the followers count increments by 1 unfollow decrement it so if you follow him let's follow Bob Burt and let's

follow Cod and if we go to our profile we see that our followers is equal to 3 which means I also mix that up too so it happened with that is that I just switched these function names around

this one should be following and this one should be followers hit save and taught restart the app and now if we go to our profile we see the following counts 30 if we take a look at our

database and refresh it we can see that we have the following so this one is the user ID and it has the three users that we just followed and then for the followers we

see the three users we followed and they each have one follower which is our account that's all for this video remember to leave a like subscribe share this video and it's our the repository

and github thanks for watching and I'll see you in the next one [Music]

Welcome to my Flutter Firebase Instagram tutorial series where you will learn Flutter and create amazing apps using Dart. In this video, we allow users to follow and unfollow each other. Throughout this series we will implement and interact with the Cloud Firestore database, model data in Cloud Firestore, learn Cloud functions, and more!

» Remember to like, subscribe, share this video, and star the repo on Github 🙂
https://www.youtube.com/MarcusNg?sub_confirmation=1

» Resources
Source Code: https://github.com/MarcusNg/flutter_instagram_clone

» UDEMY: The Complete Flutter UI Masterclass Coupon
https://www.udemy.com/course/the-complete-flutter-ui-masterclass/?couponCode=B5D3C1BA98B898FC6605

» UDEMY: Flutter and SQFLite Coupon
https://www.udemy.com/course/flutter-and-sqflite/?couponCode=749216595DBD298E3599

» Studying for coding interviews?
https://algoexpert.io/marcus
Use promo code “marcus” for a discount!

» Socials
GitHub: https://github.com/MarcusNg
Twitter: https://twitter.com/MarcusLNg

» My Gear*
Logitech Master MX 2S Wireless Mouse: https://amzn.to/35BZoYy
AirPods 2: https://amzn.to/2MdpJVb
Apple Magic Keyboard: https://amzn.to/2nCXqpu
Blue Yeti USB Microphone: https://amzn.to/32cs6wM
JBL Charge 3 Bluetooth Speaker: https://amzn.to/2IZuxeT

*Affiliate links

» Outro Music
Harmony – Joakim Karud (https://www.youtube.com/channel/UCVBUm9ccjHy0utvlChyrPHA)

#Flutter #FlutterFirebase #CloudFirestore