Flutter & Firebase App Tutorial — Part 5 Stream & Provider in Flutter
Create a flutter authenticate app in 10 mins by using firebase as the back-end. You will learn how to listen to the authentication changes by using Stream in the Flutter and then direct users to the desired screen by using Provider for state management.
More Tutorials:
- Flutter & Firebase App Tutorial — Part 1 Get Started
- Flutter & Firebase App Tutorial — Part 2 App Structure
- Flutter & Firebase App Tutorial — Part 3 Firebase Sign In Anonymously
- Flutter & Firebase App Tutorial — Part 4 Custom model in Flutter App
- Flutter & Firebase App Tutorial — Part 5 Stream & Provider in Flutter
- Flutter & Firebase App Tutorial — Part 6 Firebase Sign Out
- Flutter & Firebase App Tutorial — Part 7 Firebase Sign In and Register With Email
- Flutter & Firebase App Tutorial — Part 8 toggle between forms and form validation
- Flutter & Firebase App Tutorial — Part 9 loading Spinkit and theme & layout
Table of Contents
- Use Stream to listen to the authentication changes
- Use Provider for state management in Flutter
- Let descendant widgets access the events in the Stream
Step 1️⃣: The goal is to listen to the authentication change in the Flutter and then direct users to the desired screen.
Stream helps the app to receive a sequence of events. An event would be a data event, an error event, or an authentication change in our case. It helps the app to listen to and subscribe to events, and then respond to event changes.
When a stream has emitted all its events, a single “done” event will notify the listener that the end has been reached.
Step 1.1: Set up the stream in the auth_service
file to start listening to the authentication changes
The stream will return a customizedUserModel
object whenever there is a change in the authentication. ie. When there is an authentication change, we map the Firebase User
object into a UserModel
class.
// auth change user stream
Stream<UserModel?> get onAuthStateChanged{
return _auth.authStateChanges()
//.map((User? user) => _userModelFromFirebase(user));
.map(_userModelFromFirebase);
}
Now, we set up a stream that listens to the changes whenever there is a change in the state of authentication. In our case, the getter will either return a null or an UserModel
object.
Your support would be awesome❤️
Please help me get 100 followers.
Step2️⃣: Use Provider
for state management in Flutter so descendant widgets can be notified when the state of authentication changes.
Now, we use Provider
to provide the stream data to the root widget so that it can listen to all authentication changes and pass the information down below.
Step 2.1: Install Provider
package
Step 2.2: Wrap a widget tree in a Provider
, and then we can supply a stream to that Provider
. After that, when there is an authentication change in that stream, the Provider
makes it accessible to its descendants in the widget tree.
In our case, whenever there is an authentication change, the stream will send either a null or an UserModel
object that is accessible in the widget tree.
We wrap the root widget with a StreamProvider.
Inside the StreamProvider
, we can specify what stream we want to listen to, and what data we expect to get back to. And then, any descendant widgets can access the data provided by this stream.
In our case, inside the Wrapper
widget that sits below the root widget can access this UserModel
data whenever the state of the authentication changes since the stream actively listens to the authentication events.
Step3️⃣: Accessing the events in the descendant widgets
Step 3.1: go to wrapper.dart
file
Step 3.2: import Provider
packages
Step 3.3: Now, we access the UserModel
data from the Provider
, we specify what type of data we need so the Provider
knows what streams to listen to.
Step 3.4: Return the correct widget based on the new data received in the stream.
Next, we will focus on the Sign Out function.
More Tutorials:
- Flutter & Firebase App Tutorial — Part 1 Get Started
- Flutter & Firebase App Tutorial — Part 2 App Structure
- Flutter & Firebase App Tutorial — Part 3 Firebase Sign In Anonymously
- Flutter & Firebase App Tutorial — Part 4 Custom model in Flutter App
- Flutter & Firebase App Tutorial — Part 5 Stream & Provider in Flutter
- Flutter & Firebase App Tutorial — Part 6 Firebase Sign Out
- Flutter & Firebase App Tutorial — Part 7 Firebase Sign In and Register With Email
- Flutter & Firebase App Tutorial — Part 8 toggle between forms and form validation
- Flutter & Firebase App Tutorial — Part 9 loading Spinkit and theme & layout
Your support would be awesome❤️
Having more followers will encourage me to write more articles.
👉 The source code is updated on Github