Advanced Provider Tutorial - Part 1: Project Setup & Authentication Flow

Sign up here for more updates: 👇👇
codewithandrea.com/
LEVEL: INTERMEDIATE / ADVANCED
This multi-part tutorial shows how to use Provider to build an app that lets the user choose and upload an avatar image to Firestore.
- We will start from a sample project which already contains some widgets and services.
- We will see how to use Provider to connect things together.
- We will learn how to setup an architecture that supports more complex applications.
FULL SOURCE CODE 👇👇
github.com/bizz84/firebase_us...
HIGHLIGHTS
00:00 - Intro
00:28 - Application architecture and overview
01:17 - Tutorial overview
02:45 - Demo app overview
04:00 - GitHub code & project setup
05:33 - Let's code
07:22 - Firebase authentication service: overview and usage
09:49 - Conditional authentication logic
13:06 - Wrap up
Want more? Check out all my Flutter courses: 👇👇
codewithandrea.com/courses/
Thanks for watching!

[@curiousnrd]

This is fantastic! Thank you for the hard work. I look forward to the rest of the series!

[@yassinyoussoufali6324]

You really explain things well. Can't wait for the next episodes :)

[@blisteredoutlaw1993]

I just wanna say I am very thankful that I saw your channel. Out of all the channels I am subscribed, you are one of the top 5 if not the best channel teaching flutter! In my opinion, lots of the technique you have used (mostly on advance tuts) can be considered production grade and some just need some few tweaks and they are ready to go! Just so you know, I subscribes to many channels teaching flutter just to keep updated about it. But, for some reasons, I never really delve into it. Your teachings are one of the reason I will be studying flutter now. I look forward for more of your videos . Thanks Andrea! :)

[@dl88889]

I just signed up for your REST API course on your website. Can't wait to get started. Thank you for putting up all these great resources!

[@rasmustchristensen]

Perfect once again. I already have provider and Firebase Auth in the app I'm building, but learned a few tips I'll refactor to improve!

[@findsarfaraz]

Great... tutorial... . you people make internet a better place

[@techyeunoia9414]

just starting out with flutter and I'm already thankful you exist and make these tutorials

[@goddardpk]

Andrea, thanks for concise and informative examples! This 14 minute segment is priceless!

[@JimmyCheng]

great work man, you are wonderful!

[@andreykotkovets6868]

Great, Andrea. I see the light at the end of ProviderUnderstanding tunnel ;)

[@sk8sbest]

great comment

[@AndreClements]

wow, it's architecture is so elegant :-)

[@isurujn]

I appreciate the effort you put into your tutorials. As someone who learns by visualising, your charts/graphs of the overall system really helps. Thank you 🙏🏼

[@moses995]

You're amazing at what you do

[@DrSndan]

Thank you for this wonderful tutorial

[@mual77]

WOW!! Thanks a lot.

[@user-gt4je7vi9w]

magnificent!!!

[@adammusaali4906]

Thank's so much for this tutorial,that god help you

[@infinitezymalny]

look out which version of provider u use, according to documentation in v4.x.x: The parameters builder and initialBuilder of providers are removed. initialBuilder should be replaced by create. builder of "proxy" providers should be replaced by update builder of classical providers should be replaced by create

[@kirill4531]

That's what I was waiting for! Great. Subscribed and turned notifications ON! I'm excited because of the announced future optimization of the architecture and the proper approach which you will show us at the end of this series. !!! Also please don't forget to show how to handle gracefuly errors which may arise in services (auth/user/data/etc.) and how to consume them in the UI (a snackbar or a dialog)

[@CodeWithAndrea]

Sure, next video is coming next week. Re. handling errors - the videos already show try/catch blocks where appropriate. The simplest thing is to show a dialog inside the catch (this is easy to do, also covered in detail in my paid course).

[@kirill4531]

@@CodeWithAndrea Andrea Bizzotto try/catch handling is for services and ViewModel layer, whereas in the UI you want to show corresponding dialogs to the user. And the question is how do you do that. What I do: is I have a Stream in my ViewModel and in the UI I listen to that stream and show snackbars or dialogs on each portion of data

[@faisalahmed1981]

good one

[@macdon2351]

Thank you

[@graphiclife5416]

Great! Finally one propper tutorial with the Provider and Firestore. It would be nice if you also create a users collection for user details like most apps do. And please show us how to create a stream without streambuilder in custom class with ChangeNotifier and how to dispose stream. I'm super excited for your future tutorials! Thank you!

[@CodeWithAndrea]

Thanks. There's nothing wrong with streams per-se. If you use a 3rd party API that gives you streams (e.g. Firebase auth, Firestore), then StreamBuilder/StreamProvider is the way to go. I normally only use ChangeNotifier/ChangeNotifierProvider for local application state. But yes, a lot of this is a good topic for future tutorials.

[@graphiclife5416]

@@CodeWithAndrea What if you need data from the Firestore on multiple screens but you don't need to display them, do you still use StreamBuilder? I also bought your Flutter course on Udemy I found yesterday. I hope your course is different because all the courses I found are showing how to create StreamBuilder and display data right away. I need one tutorial for initiating the stream > manipulating stream data > making data globally available across the app. Or even better: initiating 2 streams > combing and manipulating stream data > and making data globally available.

[@CodeWithAndrea]

Graphiclife you can manipulate stream data inside a Bloc if you want. My course shows how to work with stream subscriptions, create and manage streams in Blocs, and combine multiple streams with RxDart.

[@Linxy]

Thanks, absolutely fantastic, the best!! You are 1000000000x better than fireship

[@CodeWithAndrea]

Linxy Thank you. I get a lot of inspiration from Fireship. Glad my videos are useful

[@MasatoNakada1]

Thanks Andrea for an awesome video! Quick question. Why did you use stream to track authentication and not changeNotifyProvider?

[@CodeWithAndrea]

ChangeNotifierProvider works with objects that implement ChangeNotifier. Streams don't. So it's easier to just use a StreamBuilder in this case.

[@MasatoNakada1]

Andrea Bizzotto thx for the response and my bad! My question should be, why did you use stream instead of changeNotifier? I recall that you refactored to changeNotifier on your Udemy course..

[@themindstorm9947]

@@MasatoNakada1 even I was confused as to why a streamBuilder had to be used. I thought that by referencing something from the service, the widget would automatically rebuild itself on a change. Did you find the answer?

[@MasatoNakada1]

TheMindstorm from what I understand today, since Firebase_auth only gives you the Stream of FirebaseUser, you have to first use that to get the User class. Once you do that, you can add that value to a Privider and expose that to the widget tree under it. Well I maybe completely wrong though 🤫

[@icalculi]

regarding signout, @12:50 should i make the provider to listen false?

[@dhruvkelawala960]

Can you share the desktop wallpaper?

[@themindstorm9947]

For managing authState, why do you use a streamBuilder? Is not not suitable to use a Consumer()? Other than that, I understood everything, great tutorial!

[@CodeWithAndrea]

You need something that can consume a Stream. So either a StreamBuilder or a StreamProvider.

[@fumesmaispasque]

Thanks you, which "indent extension" do you use please ? and can you list all yours VsCode extensions

[@CodeWithAndrea]

I listed all my extensions here: kzbin.info/www/bejne/q3eYo4NoiriDbaM

[@seanthomas9398]

Thanks for this video! In the AuthWidget, does "listing: false" do anything? It looks like the FirebaseAuthService isn't a ChangeNotifier, and that the only way we can get updates is via the StreamBuilder.

[@CodeWithAndrea]

In theory, I agree with you. In practice, I have observed an issue where unwanted widget rebuilds were taking place when pushing routes IF the AuthWidget is a descendant of MaterialApp. This should not be a problem if you use the code from Advanced Provider Tutorial 3.

[@strikeoffate]

will the whole thing be updated to null safety? In Avatar Reference i get error, that it can't return Null

[@puspanjalimohapatra7560]

Hii, my homepage is extended to statefullwidget , everytime if i pressed button or using Textformfield to input text ,streambuilder is building the homepage again .pls give me a solution

[@Bathusaix]

Hi Andrea .. I love your tutorials .. A query here in this project there is no user creation? that is to say the method of firebas e to create users? in the atuh services I don't see that method

[@CodeWithAndrea]

Nestor Marquez when you sign in anonymously, Firebase creates a new user.

[@Bathusaix]

@@CodeWithAndrea I mean the method createUserWithEmailAndPassword is not in this project right?

[@BrianAkaBear]

How do you correct error: flutter Exception has occurred. FormatException (FormatException: Unexpected character (at character 1) ^ ) when parsing json?

[@CodeWithAndrea]

Looks like you're trying to parse HTML as JSON. That won't work. Would be best to fix your backend API and ensure it always returns JSON.

[@rizi619]

what kind of changes do we need if we want to this with REST api, rather than firebase

[@NatoBoram]

You need an existing back-end. Then, using the same services, just send a HTTP Post request to said back-end and return its value in a Future.

[@garethbeall3674]

Is there a Provider version of StreamBuilder?

[@CodeWithAndrea]

Gareth Beall yes, it’s called StreamProvider. I’ll cover it in future videos, but you can look up the documentation for now.

[@rikyriky966]

A great video again, as always. Do you know how to access a provider of an instance of widget class from the next route? For example, I have a provider class named “PostPVD” which I use as the state controller of a presentation widget class named “PostScreen”. PostPVD is used in every instance of the PostScreen as a controller by using a variable “postPVD”. There is another presentation widget class named “PostEditScreen”. Users can navigate to PostEditScreen from PostScreen back and forth. I want to have an access to that “postPVD” inside of PostEditScreen and make two routes share the exact same instance of postPVD. I actually find a way and will edit this comment as soon as I get my hands on my laptop. I pass the postPVD as a parameter to the PostEditScreen and consume it. So they share the same provider instance. In other words they share the same controller.

[@CodeWithAndrea]

Provider can work with multiple routes, as long as your providers are ancestors of the MaterialApp. I'll cover this in detail in upcoming videos. But for now you can check the finished source code: github.com/bizz84/firebase_user_avatar_flutter/tree/optimized-implementation

[@rikyriky966]

Andrea Bizzotto Huge thanks for sharing the complete repo Andrea. I think it may not work if I declare the providers by wrapping the root of my app. Because they are now available fir the rest of the widget tree. So every other widget use the same provider as the state controller. Btw, AuthProvider, StyleProvider, LocalizationProvider, BasketProvider etc. are the ones that all the widget tree must have an access. So I declare them inside a MultiProvider by wrapping the root of my app widget, as you suggest. However, I really needed individual providers that are solely available for each new instance of a widget or route. Separately and independently from each other. In order to make these type of state controlling, I instead declare them inside the corresponding widget so only that instance of the widget has access to that particular provider. If I want to make that provider to the next route, I pass the “provider” and the “context” to the next routes as constructor parameters. So the declared provider can be consumed by the Consumer widget in the next route. There is no need for you to reply and it’s totally OK. It’s just me wanted to write a few of my opinions :)

[@CodeWithAndrea]

@@rikyriky966 Yes, if you need individual providers, then they don't go at the root of the widget tree. In this scenario, I normally inject the dependencies that I need to the constructor of the widgets presented inside routes. This way I don't have to hold on to other widgets' contexts.

[@AnvildevilGq00]

a lot of code from netninja

[@johndavedecano2438]

why people always assume that were always be using firebase?

[@techcsnerd1328]

yess.. There should be more tutorials on Flutter plus NodeJs/PHP

[@theascendunt9960]

@@techcsnerd1328 That's not the point of this tutorial. The exact tech stack you use in the backend shouldn't matter to learn Provider. If you learn to do it with Firebase, you should be able to learn how to do it with other tech stacks on your own. Stop relying on spoonfeeding.

[@phamquang9217]

FirebaseUser changed to User AuthResult changed to UserCredential GoogleAuthProvider.getCredential() changed to GoogleAuthProvider.credential()