Flutter & Firebase App Tutorial — Part 4 Custom model in Flutter App

4 min readOct 24, 2021

Create a flutter authenticate app in 10 mins by using firebase as the back-end. You will learn how to transform a Firebase object into a custom class to let your app look simpler and structured. If you haven’t set up your environment, please go to Flutter & Firebase App Tutorial — Part 1 Get Started.

More Tutorials:

Flutter & Firebase App Tutorial — Lumei Digital

Create a custom model
Turn Firebase object into the custom model

Now, we currently can get back the response from the Firebase when we sign in anonymously if it was a success. The response from the Firebase is a User object that contains a UID identifying the user that’s logged in but it also contains lots of information that we do not need for this app.

Hence, when we receive the User object back, we turn it into an object that is simpler and just contains the information that we need.

Step 1️⃣: Create a models folders and a file called UserModel.dart.

Step 1.1 The only thing we need is afinalproperty that won't change as the user goes between different screens and is also a String:uid

Step 1.2 Set the uidproperty in a constructor. UserModel({this.uid});will user name parameter to set the finalproperty.

When we create a new instance of the UserModel class, we will pass in theuidproperty and it will auto-apply it to the final String uidproperty.

class UserModel {
  final String uid;  UserModel({required this.uid});
}

Step2️⃣: Turn Firebase object into the custom model

We will turn the Firebase Userobject into a UserModelobject based on the UserModelclass.

Step 2.1 Go to auth_servicefile and create a method that returns an UserModelobject. It’s a private function denoted by this underscore meaning we can only use it inside this file.

We accept a FirebaseUserobject in this method. And Inside this method, we take that Userobject and turn it into an UserModelobject.

Step 2.1 Return an UserModelobject in the signInAnonymously()method

Turn Firebase object into the custom model — Lumei Digital

Now we simplify the FirebaseUserobject in our app and don't have the extra information we do not need. And we now can control the properties in our app.

Next, we can listen to the users signing in so we can react to that and show the correct content.

Currently, we can sign in to our app and Firebase can return the User object back into our custom UserModelobject.

Next, we will listen for when we get the User object back and there is an auth change. For example, a user just logs in and we want to then show the user the Home screen instead of the Sign-in screen.

Flutter & Firebase App Tutorial — Part 4 Custom model in Flutter App

More Tutorials:

Table of Contents

More Tutorials:

Written by Jumei Lin