Flutter Firebase Instagram Tutorial

Bottom Navigation Bar | Flutter Firebase Instagram Tutorial 2019 (Ep 3)

hi everyone this is marketing in today's video we're going to be adding a bottom navigation bar to our app so we can navigate between screens before we get

started I want to give a big shout-out to Andy green Shaw on the last video he commented saying that having the Navigator in our logout function and signup user function is

unnecessary because in our main dart file we have a stream builder that checks for the firebase Austin stat on/off state changed and if the users logged in we show the feed screen and if

the user is not logged in then we showed them the login screen and so in our logout function we actually don't need to have our navigator here because I'll touch sign out changes the on/off state

changed scream so if we hit save and then hit logout the login screen is automatically shown and then for a sign up user navigator is also necessary but for me I actually

need to have a navigator because when I sign up without it I didn't sign up we've seen an account created but my off state listener is not actually changed so I get stuck on the screen and if we

look at our firebase database we can see that a a.com is created and we have a new account called AOM but I'm still not logged in and then if we hot restart the app we can see that I got signed in

automatically which means that I was signed in on the backend and for some reason didn't update that listener for me I might work for you guys so depending on if it works or not

you may or may not need navigator here but in my case I do so I'm gonna leave this here for now and then back to logout we don't need navigator anymore we can

get rid of context and then our feed screen we can remove context here I also notice the bug with our login function if we just type in email that doesn't work in a password hit login we can see

that there's a platform exception and the app gets stuck because we're not actually catching this exception so we need to wrap this in a try-catch block [Music]

and we can print the error message and then just a wait and then if we restart the app [Music] we can try to sign anak

so let's put an invalid email in hit login and now the app doesn't brush okay let's sign back into the app so now we want to implement our bottom navigation bar and our app bar the first thing we

want to do is actually create a new screen and we can call it home screen dot dark then make that a stateful widget import material and let's make this a scaffold and then let's go to our

main file we can change out feed screen for home screen and then we're doing this because we're actually going to let the bottom navigation controller in home screen and we're doing this because we

want to implement the app bar and bottom navigation bar in our home screen instead of putting it in our feed screen since our home screen is going to contain all the other screens too in a

page controller let's start with our app bar create an app bar with a background color of white and say title text Instagram style textile color color stop black and then font family would be

Billabong font size we can make it 35 it's safe now you have a nice app bar on top next we want to add our bottom navigation bar and that would be outside or app bar inside the scaffold and let's

use a Cupertino tab bar [Music] items gonna take bottom navigation bar item let's make the first icon icons thought home for the house and that'll

be our feed screen so now we have five icons let's make the second one search and that'll be first the search screen where we can search for users the middle button will be the photo camera that'll

be for uploading photos the notifications that'll be our activity log and then our account so now we have our tab bar on the bottom and we can't click anything right now because we

didn't give the bottom navigation bar State so on top let's make an integer current tab and set that equal to zero [Music] you can set current index to current tab

and then there's an on top function that takes that returns an index and we can just set state for the current tab hit save and now the bottom bar changes colors let's make the active color block

nice next we're going to want to make a pagecontroller [Music] which is going to let us switch between screens want to stanch eat it in our

niche state and now if we go down to our body of the scaffold we can add a page view with the controller page controller and now our page view is going to take in children so the children of the page

view they're going to be five different screens our feed screen search screen create post screen activity screen and user screen so now let's create those screens

now let's quickly make a bare-bones screen for each of the new files we just created so we're gonna make a stateful widget profile screen and remember to always import material changes to a

scaffold and for now let's just have it take a body of centre child text will call this profile screen and let's just copy-paste listen to the other screens so search let's highlight profile and

then in vs code if you hit command D on Mac every time you get command D it's gonna highlight a new instance of what you highlighted and have some replace that with search and I'm gonna do the

same thing to create post and the activity screen now let's go back to home screen dark and now inside our page view we're going to have our feed screen search screen create post screen

activity screen and finally our profile screen if we hit save now if we look at our simulator we see that we have our feed screen and then search screen create post activity and profile but the

problem is is that we don't have the corresponding icon lighting up or becoming active when we swipe so right now we're on the create post screen but the profile buttons highlighted the way

we fix that is by going to our page view and then adding and on a change function so that returns an index and then we can just set state and change the current tab to index now if we start let's hot

restart the app if we swipe through we see that the bottom is changing accordingly but now if we click the screens don't change we can fix this by going to our page controller and using

dot animate to page and that takes in the integer of the page which would be the index a duration and a curve which is the type of animation duration you can say 200 milliseconds and then for

the curve type with news curves dot season now if you want to see the other types of curves you can hover over curves here and then there's a list of all the

different types of curves that are available to us and we're using easin so now if we hit save hot restart the app and then we can click the row we can see that the

screens correspond to the correct type now and we can also swipe in the next video we're going to be working on our profile screen and allowing users to edit their profile thanks for watching

remember to start the repository on github and to like the video and subscribe to my channel see you in the next video [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 a bottom navigation bar to navigate between our new pages. 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

» 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