Flutter & Firebase App Tutorial — Part 6 Firebase Sign Out

Create a flutter authenticate app in 10 mins by using firebase as the back-end. You will learn how to enable Firebase Sign out and then use Stream and Provider in Flutter to direct users to the right screen.

Flutter & Firebase App Tutorial — Lumei Digital

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 Animation Tutorial
• Using SQLite In Flutter

Table of Contents

• Enable Firebase Sign out in the app
• Enable Firebase Sign out method in the home.dartfile

Flutter & Firebase App Tutorial — Lumei Digital

Step 1️⃣: Add Firebase signOut() in the auth_service.dartfile

  //sing out
  Future signOut() async{
    try{
      return await _auth.signOut();
    }
    catch(e){
      print(e.toString());
      return null;
    }
  }

Step2️⃣: Enable Firebase Sign out method in the home.dartfile

Step 2.1: declare a final AuthServiceproperty in the home.dartfile

✅ add title & backgroundColor inside the Scaffold

✅ add a elevation: 0.0property so we do not have a shadow and it’s flat on the screen.

✅ add a actionproperty that expects a widget list and these actions represent buttons that appear inside the app bar at the top right.

    final AuthService _authService = AuthService();
    return Scaffold(
      backgroundColor: secondary,
      appBar: AppBar(
          title: const Text('Lumei Digital'),
          backgroundColor: primary,
          elevation: 0.0,
          actions: <Widget>[
            TextButton.icon(              
              icon: Icon(Icons.person),
              style: TextButton.styleFrom(
                primary: secondary,
              ),
              label: Text('Sign out'),
              onPressed: ()async {
                await _authService.signOut();
              },
            )
          ], 
        ),
    );

Flutter & Firebase App Tutorial — Lumei Digital

Step 2.2: when the await _authService.signOut() is completed, our Stream will get back a null value from the Provider. Subsequently, the Wrapper widget will return the correct widget based on the new data received in the stream.

Please visit Flutter & Firebase App Tutorial — Part 5 Stream & Provider in Flutter to recap the Stream and Provider in Flutter.

Step 2.3: the user variable in the Wrapper widget is now equal to null when a user signs out so the Wrapper widget then returns Authenticate widget instead of Home widget.

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

Next, we will focus on the Firebase Sign in with an email and password 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
• Flutter Animation Tutorial
• Using SQLite In Flutter

Seeing my followers grow will encourage me to write more articles. If you have any questions or anything to be improved please write a comment in the comments section.

I am a Flutter lover, and I talk about flutter, mobile development, and artificial intelligence.

👉 The source code is updated in Github