Flutter Firebase Instagram Tutorial

Search Users and Provider | Flutter Firebase Instagram Tutorial 2019 (Ep 6)

hey everyone welcome to my channel where you will learn flutter and create amazing apps today we're continuing with my flutter fire-based Instagram series

we are going to add user search functionality and implement a state management plug-in called provider the first thing we're going to do is create our search UI we want to add a search

bar into the app bar so let's make an app bar inside the scaffold of our search screen we'll make the title a text field widget and it's safe and we can see that the app bar we just created

appears underneath our original Instagram app bar and that's because inside our home screen we initialize the app bar on the screen that renders all of our other screens in our page view in

order to fix this we need to remove the app bar from our home screen and individually add it to our feed screen search screen for a post screen activity Square and profile screen

so if we cut this out it save we see that the search screen at bar moves up but now all of our other screens don't have an app bar now if we go to the activity screen we can just copy-paste

the app bar in and we see it on our activity screen now and let's add it to the rest of our screens now we added our feed screen our profile screen and our create post screen and now if we click

through we see that each screen has an app bar going back to our search screen we can start styling the text field we can add a controller call it search controller and that's going to be a

variable inside our search screen state that's of type text editing controller and we can set that equal to text editing controller and that's going to allow us to see what the text is inside

our text field let's change the app bar to white by accessing background color and setting that to colors not white and there's a line underneath our text field and it glows blue the way we can get rid

of this is by adding a decoration going to input decoration and then setting border to input border none' and now the line disappeared we can add some in text by doing in text and we'll type search

[Music] to add an icon to the front of the text field read access prefix icon and add icon icon start search and we'll set this size to 30 point Oh

[Music] for the clear icon you can add a suffix icon and that will be an icon button icon icon icons dot clear and then we'll have a non pressed and for now we'll

just say print clear and now when we hit save we have the Clear button here and if we click that it prints clear to the console if we look at our text field we can see that the text here is not

aligned with the buttons and the way we can fix that is by going into our decoration and adding content padding and we do edge in sets dot symmetric vertical fifteen-point oh and that

shifts it down just a little bit to align with the search icon and the clear icon to finish off styling or text field we can add a filled property and set that to true and when we hit save we see

that the background of our text field becomes a light gray color next we actually have to work on querying for users when the user hits the search button

so let's add an unsubmitted button to our text field and that's gonna give us an input which is a type string and for now we'll just print the input out our search screen file and add a future

query snapshot and that's an import cloud firestore and we'll call this variable users going down to the body of our search screen we can now create a future builder to display our users so

we'll make a few throw builder and the future is going to be users and the builder will of context and snapshot the first thing we have to check is if our snapshot does not have data and if it

doesn't then we want to return a center child circular progress indicator and it save and now we have the spinner here next we want to check if our snapshot data documents dot length is equal to

zero which means no users were returned in our search then we want to return a central widget with a child text and say no users found please try again and after that we just need to return a

ListView builder the item counter is going to be snapshot data documents dot length which is the amount of users that were returned in the search and then we're going to convert the

snapshot document into a user so we're going to say user user is equal to user dot from doc snapshot data documents index and then import user here we're going to return a function called build

user tile and that's going to take in a user and up here we can write that function so build user tile take some type user and for now we can just return a list tile that has a title text widget

user name and it's safe now we're ready to write the database function to get the users we search for inside our on submit function instead of printing out our input where if we type inside our

search and hit done it's going to return what we typed in we can set state and set our users equal to database service dot search users input let's import database service and we'll write the

function search users now inside database service let's make a new function that's going to be static we're going to return a future query snapshot search users it's going to take in a

string name and we need to import cloud firestore for the query snapshot and we'll do future query snapshot users is equal to our users Ref dot wear and doubt wear is going to let

us query for all the users with a name that's similar to the name we're searching for so we can say name as the field and then we're going to use is greater than or equal to name dot get

documents and then we just need to return users now this is a very basic way to search for users in your database it's by no means perfect because I'll show you small possible problems with it

but for the sake of this video we're going to search for users this way just to keep it simple you can always implement your own logic to search for users to meet your desired functionality

going back to the search screen if we hot restart the app we can type in the name of a user let's type in my own name it done and then we see that I appear before we go any

further let's style our list style so going back to our build user tile let's add a leading property and it'll be a circle avatar with a radius of 20 point O and it's going to have a background

image inside here we're going to check if the user profile image URL is empty and if it's empty we're going to display the asset image assets images user placeholder dot jpg and make sure you

wrap that in a string otherwise we just return the cached Network image provider user dot profile image URL now if we hit save we see that my image appears the other thing we want to add is an on top

function and that's going to be a navigator dot push context material page route builder profile screen and then the user ID will just be the user ID and that's going to let us view other

people's profiles it's save and now if we click Markus it segues to our profile and since this is our profile we're even able to edit our profile here going back to our search we can try

searching for other users so if we just type in like Bob ain't it done Bob bird appears and we also see other names that are after Bob word on the ascii table so again if this is not your desired

functionality you can always compliment your own search functionality inside the search users function in your database service if we click on Dan we can see Dan's profile Elizabeth we see

Elizabeth's profile and now let's deal with some small bugs inside our suffix icon let's add a clear search function which will write right under our build user clear search and here we're just

going to set the state of users to null and we're also going to call search controller or clear now if we click the Clear button we see that the text field clears but the users don't and that's

because inside our body we need to have a check where we check if users is equal to null and if it is then we return a center child text search for a user and hit save now when we search for users

and it done we see our users are here and if we clear then our users all disappear now there is one problem with our clear search method if we clear when the text

field is not focused then we see that we get an error called text selection and this is because our text fields not in focus so going back up to our clear search we can fix this by using widgets

finding instance dot add post frame callback and then using a phat our function to search controller dot clear and hit save now when we search for user so we'll

type in Bob again and it will clear this here and then we hit the Clear button on our text field with the text field not in focus it's going to focus the text field and we're not going to get the

error message anymore and this also makes sense from a user perspective because if you user hits the Clear button they're most likely searching for another user so it makes sense for the

keyboard to pop back up and just right there we saw another issue where if we have no users here and do an empty search for a user then we see that all the users in our database are returned

we can go into our on submitter function and do a check if our input is not empty which means that we have text in there then we want to run the search and now if we clear this and we have no users

here and hit done our search function is not called let's set our search one more time now if we click Elizabeth we go to our profile and in the future once we I create post we'll add the feature where

you can view other people's posts in their profile now that we rolled them with searching for users we can focus on adding the provider plugin providers a state management tool that allows us to

store data inside a model that can be accessed anywhere within our widget tree depending on where we instantiate the provider so we're gonna add the plug-in called provider and this is the version

I'm using I'll also leave a link to provider down in the description below let's hit save and now we're going to create a new model and that's going to be called user data dart so this is

going to be class user data that extends a change notifier and the string will be current user ID we touch change notifier vias that allows our UI to listen for changes

within our user data class if we ever added more variables that we need to track now that we have our user data class let's go to our main dart file and we're going to wrap our material app in

a new widget called change notify our provider and that's going to have a builder context user data and make sure you import the provider package and the user data class and it's save now the

reason we implemented our change notifier provider at the very top level of our app is because we're using our user ID throughout the whole entire application so now instead of passing

the user ID to each of our screens we can just access the current user ID through context but first we need to set the current user ID whenever a user logs in our signs up so now inside our get

screen ID when the user opens the app and they're redirected to the home screen we want to access our provider so we type provider of user data current user ID and we can just set that equal

to the snapshot data UID and snapshot that data at UID is our user ID and now because our current user ID is stored inside our provider context we can remove user ID from the home screen now

if we go to the home screen we don't need to pass an user ID anymore and here in order to pass our user ID to the profile screen we can type provider of user data context dot current user ID

and it save and now if we hot restart the app we can click our profile and it'll load our profile and the reason we need to still pass in a user ID for a profile screen is because inside our

search function if we search for another user we want to be able to pass in their user ID to view their profile but now if we're creating a post or trying to view our timeline we already have access to

our current user ID through provider and that makes it so we don't have to pass in our user ID inside our screens now the other case we have to deal with is inside our all service when a new user

signs up we need to modify our user data here so we're going to import provider of context user data dot current user ID and we'll modify that equal to signed in user dot UID now I hit save and if we

sign out of the app now let's not restart first logout and we can sign up with the new account and now if we click profile we can see

that our rob profile loads because our occur entire ID was assigned to signed in user to ID and the inside our home screen we're just passing in our current user ID from context and a way we can

make sure that our current user ID is being stored is by just printing it out right here at the top of our build method now if we HOT restart the app we can see that inside our debug console

our current user ID is printed out so we know that everything's working correctly by implementing provider now we avoided something called prop drilling which is where you pass down variables to sub

widgets in your widget tree if we didn't implement provider then we'd have a lot of prop drilling where we'd be passing our user ID to our create post screen and then taking that ID and passing it

to the database in order to know who created the post but now we can just access the provider context to get our current user ID which saves us a lot of time and cleans up our code that's all

for this video in the next video you will learn how to create posts and display them in our feed remember to leave a like subscribe share this video and to start the repository on 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 add user search functionality and implement the Provider package. 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
Provider Package: https://pub.dev/packages/provider

» Flutter and SQFLite Udemy Course 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