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

Flutter & Firebase App Tutorial — Lumei Digital

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.

Flutter & Firebase App Tutorial — Lumei Digital

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_servicefile 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 Providerfor state management in Flutter so descendant widgets can be notified when the state of authentication changes.

Now, we use Providerto 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 Providerpackage

Install Provider package — Lumei Digital

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 Providermakes 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 UserModelobject that is accessible in the widget tree.

Stream Provider in Flutter — Lumei Digital

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.dartfile

Step 3.2: import Providerpackages

Step 3.3: Now, we access the UserModel data from the Provider, we specify what type of data we need so the Providerknows what streams to listen to.

Step 3.4: Return the correct widget based on the new data received in the stream.

Direct to the right screen based on the even in the stream — Lumei Digital

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