Flutter User Profile Page with Firebase: A Practical Guide for Developers

Every app requires users to have their unique profile. As a developer, it's a common task to create a user profile page and integrate it with databases for storing and retrieving user data. This blog zeroed in on how to create a Flutter user profile page with Firebase. We will touch base on Firebase authentication, Firestore, and Firebase storage usage in the Flutter app, making sure as you read along, you'll have the necessary details to create your own user profile page in a Flutter app.

Let's look into the procedure of setting up the Flutter environment before we dive into Firebase.

‍

Setting Up Flutter Environment

To get started with Flutter, you need to set up your development environment first. Developers familiar with the setup can skip this part. If you are new to Flutter, follow the subsequent steps.

‍

Installing Flutter

Flutter is Google's portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase. Download the stable release of Flutter from the Flutter website. Extract the zipped file to the desired location. Add the Flutter and Dart SDK to the path of your machine.

To verify if Flutter is installed properly, open your terminal/command prompt and run:

Copy
1
2
     flutter doctor
     

This command checks your configuration and displays a report of the status of your flutter installation.

‍

Configuring your IDE with Flutter

There are several IDEs where you can set up the Flutter development environment such as Android Studio, VS Code, IntelliJ IDEA, etc. You need to install the Flutter and Dart plugins in your desired IDE.

After setting up Flutter, the next step is to put Firebase into action in your Flutter project.

‍

Firebase Configuration for Flutter

As a flexible and robust solution, Firebase is a Google toolkit that allows you to enhance your apps without managing the infrastructure. It offers numerous services like Firestore database, Firebase authentication, Firebase storage, Google Analytics, and much more. We'll be primarily focusing on Firebase Authentication and Firestore for user profile management.

‍

What is Firebase?

Firebase streamlines the process of app development, provides secure software solutions, enhances the app's quality, and fosters user engagement. By integrating the Firebase project with the Flutter project, one can utilize the various services provided by Firebase within the Flutter application.

‍

Setting Up Firebase on Flutter

1. Create a Firebase Project: Head over to the Firebase console and click on the "Create a Project" card. Follow the subsequent steps to set up your Firebase project.
2. Register your app with Firebase: Now, click on the Android or iOS icon to register your Flutter app with Firebase. Fill in the required details and click Register App.
3. Download the Configuration File: Post registration, download the google-services.json (for Android) or GoogleService-Info.plist (for iOS) file and place it in your listed directory.
4. Install Firebase SDK: Now, we need to set up Firebase SDK in our Flutter project. Open pubspec.yaml file and add the Firebase Core and Firebase Auth dependencies.

Copy
1
2
3
4
5
6
7
     dependencies:
      flutter:
        sdk: flutter
    
      firebase_core: ^2.15.1
      firebase_auth: ^4.7.3
     

Don't forget to run the flutter pub get command in the terminal to install these new packages.

‍

Implementation of User Profile Page in Flutter

In Flutter, everything is a Widget . From a button to a screen layout, all are built using Widgets. Hence, to create a user profile page in Flutter, we set up a tree of Widgets to render the layout. Let's conceptualize our user profile page and then integrate it with Firebase.

‍

Understanding Layout in Flutter

In Flutter, layout means arranging the widgets in a visually logical manner. For example, a column might consist of a photo, a name, and a few icons vertically aligned. The first step towards developing a visually compelling UI is understanding the structure and depth of widget trees.

‍

Building Profile Page Layout

To construct the profile page, we first create a new file called profile_page.dart in your project's lib directory.

Import Flutter Material Design: At the start of the file, import Flutter's Material package which provides visually rich widgets.

Copy
1
2
       import 'package:flutter/material.dart';
       

‍

Create a new StatefulWidget: We create a new StatefulWidget named ProfilePage. This widget creates an instance of _ProfilePageState to maintain the mutable state for this widget subtree.

Copy
1
2
3
4
5
6
7
     class ProfilePage extends StatefulWidget {
      @override
      _ProfilePageState createState() => _ProfilePageState();
    }
    
    class _ProfilePageState extends State<ProfilePage> {}
     

‍

Define the user profile layout: In the _ProfilePageState class, we override the build() function to define the user profile layout.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
     class _ProfilePageState extends State<ProfilePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('User Profile'),
          ),
          body: Center(child: Text('User Profile Page')),
        );
      }
    }
     

The user profile layout phase is done.

‍

Integrating Firebase with the User Profile Page

After designing a simple user profile page, it's time to integrate Firebase Firebase Authentication and Firestore into the project so users can sign in and manage their information.

‍

Firebase Auth for User Login

Firebase Authentication offers multiple methods to authenticate users such as Google Sign-In, Facebook Login, Sign-in with Apple, etc. For brevity, we will focus on user registration and authentication using email and passwords.

‍

Import firebase_auth and define the FirebaseAuth instance:

Initialize Firebase and create a new instance of FirebaseAuth which will be used to authenticate our users.

Copy
1
2
3
4
     import 'package:firebase_auth/firebase_auth.dart';
    
    FirebaseAuth _auth = FirebaseAuth.instance;
     

‍

Register a new user:

The Firebase Auth instance allows you to register new users using their email and password. Here's an example method to create a new user.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
     Future registerNewUser(String email, String password) async {
      try {
        UserCredential userCredential = await _auth.createUserWithEmailAndPassword(
          email: email.trim(),
          password: password,
        );
        return userCredential.user;
      } on FirebaseAuthException catch (e) {
        // handle error
      }
    }
     

‍

Firebase Firestore for Storing User Profile Information

Upon successful user account creation, we want to store user profile information like username and profile picture, which are not directly managed by Firebase Authentication. Firestore, a NoSQL database, is a great tool for managing user profile data.

You need to import the cloud_firestore package and create an instance of FirebaseFirestore.

Copy
1
2
3
4
     import 'package:cloud_firestore/cloud_firestore.dart';
    
    final FirebaseFirestore _firestore = FirebaseFirestore.instance;
     

After user creation with Firebase Authentication, we can save additional user information in Firestore. For example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
     Future createUserInFirestore(User user, String username) async {
      DocumentSnapshot doc = await _firestore.collection('users').doc(user.uid).get();
    
      if (!doc.exists) {
        _firestore.collection('users').doc(user.uid).set({
          'username': username,
          'email': user.email,
          'createdOn': DateTime.now(),
        });
      }
    }
     

Here, we check whether a document for the user already exists. If not, we create a new document with the user's ID as the document ID and set some initial data for the user.

‍

Handling User Profile Updates with Flutter and Firebase

Once you've created your user and have some initial data set, it's common that you'll want to allow users to update their profile information. Here's how to handle user profile updates and reflect them in real time on the profile page.

‍

Updating the User Profile Information

To update the Firestore document, we'll use Firebase's update method. Below is an example updateUserProfile method where a user updates their username.

Copy
1
2
3
4
5
6
     Future updateUserProfile(User user, String newUsername) async {
      await _firestore.collection('users').doc(user.uid).update({
        'username': newUsername,
      });
    }
     

‍

Displaying Updates on the Profile Page in Real-Time

Firebase's Firestore SDKs provide real-time updates for data changes. This means when a user's profile document changes, you can reflect these changes in real-time on the user's profile page.

Here's an example of how you can implement this.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
     @override
    Widget build(BuildContext context) {
      final User user = _auth.currentUser;
    
      return StreamBuilder<DocumentSnapshot>(
        stream: _firestore.collection('users').doc(user.uid).snapshots(),
        builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
          if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else if (!snapshot.hasData) {
            return CircularProgressIndicator();
          } else if (snapshot.hasData) {
            Map<String, dynamic> data = snapshot.data.data();
            return ListTile(
              title: Text('Username: ${data['username']}',
              subtitle: Text('Email: ${data['email']}'),
            );
          }
          return CircularProgressIndicator();
        },
      );
    }
     

In this code snippet, we're using a StreamBuilder to listen for updates on a Firestore document. As updates come in, we rebuild our widget with the updated information.

This allows us to reflect the updates on the user's profile page as soon as they happen. This brings in updates to the user profile with Firebase.

‍

Adding Profile Picture using Firebase Storage

Most user profile pages need a feature that lets users select a profile picture and update it over time. Firebase Storage can come in handy for these tasks.

‍

Integrating Firebase Storage in Flutter

Start by adding the firebase_storage plugin to your pubspec.yaml:

Copy
1
2
3
4
5
     dependencies:
      flutter:
        sdk: flutter
      firebase_storage: ^11.2.6
     

Create a new instance of FirebaseStorage to interact with Firebase Storage in your Flutter app:

Copy
1
2
     final FirebaseStorage _storage = FirebaseStorage.instance;
     

‍

Picture Selection and Upload to Firebase Storage

Assuming you have a file profilePicture ready to be uploaded (you can get this file using packages like image_picker), we can upload it to Firebase Storage as follows:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
     Future uploadProfilePicture(User user, File profilePicture) async {
      UploadTask uploadTask = _storage
        .ref()
        .child('userProfilePictures/${user.uid}/profilePicture.jpg')
        .putFile(profilePicture);
    
      TaskSnapshot taskSnapshot = await uploadTask.whenComplete(() => null);
      String downloadURL = await taskSnapshot.ref.getDownloadURL();
    
      return downloadURL;
    }
     

Notice that we use the putFile method which is useful for uploading local files. We also get the download URL at the end, which can be stored in our Firestore database and used to retrieve this image later on.

‍

Displaying User Profile Picture from Firebase Storage

You can display this profile picture in your app by using the download URL we stored in the user's Firestore document.

Copy
1
2
3
     // using Image.network to load an image from the network
    Image.network('${data['profilePictureURL']}')
     

That's it! You learned how to add a profile picture using Firebase Storage.

‍

Applying Security Rules in Firebase

Security is a big consideration when dealing with user data. Firebase provides various ways to secure your data with security rules.

‍

Importance of Firebase Security Rules

Firebase Security Rules allow you to control who has access to your Firebase project: Authentication, Firestore, and Storage. These rules can restrict read/write operations, validate incoming data, and much more.

‍

Implementing Security Rules for Firebase Firestore and Storage

You can navigate to the Firebase Console > Firestore > Rules to implement Firestore security rules for your application. Here is a sample rule that allows users to read/write their own document in the 'users' collection:

Copy
1
2
3
4
5
6
7
8
9
     rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /users/{userId} {
          allow read, write: if request.auth != null && request.auth.uid == userId;
        }
      }
    }
     

Similarly, in Firebase Console > Storage > Rules, you can implement security rules for Firebase Storage. Here is a sample rule that allows users to upload/download their own profile pictures:

Copy
1
2
3
4
5
6
7
8
9
     rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /userProfilePictures/{userId}/{allPaths=**} {
          allow read, write: if request.auth != null && request.auth.uid == userId;
        }
      }
    }
     

Firebase Security Rules are a powerful tool for securing your application data. Given their importance, make sure to spend a good amount of time understanding and implementing them correctly.

‍

Testing the User Profile Page and Firebase Services

Testing is important as it ensures the code behaves as intended. The assurance of quality and reliability of the Flutter application is crucial before it goes into production.

‍

Unit Testing in Flutter

Flutter provides a rich set of testing features to test apps at unit, widget, and integration levels. Unit tests can verify that the Firestore calls work as expected by using a package (cloud_firestore_mocks) to mock the Firestore instance. Here's an example of testing the createUserInFirestore function.

Copy
1
2
3
4
5
6
7
8
9
10
11
     void main() {
      final instance = MockFirestoreInstance();
      final user = User(uid: 'uid', email: 'email');
    
      test('createUserInFirestore creates a new user document', () async {
        await createUserInFirestore(user, instance, 'username');
        DocumentSnapshot snapshot = await instance.collection('users').doc(user.uid).get();
        expect(snapshot.exists, true);
      });
    }
     

‍

Testing Firebase Service Integrations

Simulating the user registration process to ensure that the communication between the Firebase Authentication, Firestore, and Firebase Storage squads goes unerringly is crucial. Integration tests help us accomplish such requirements.

Though the cloud services offered by Firebase don't support a local emulator completely yet, there are several strategies you can use. You can use a separate Firebase project with test-specific data, mock the interaction, or use Firebase's local emulators for these tests.

‍

Ready to Build a Flutter User Profile Page With Firebase?

The creation of a user profile page using Flutter and Firebase is characteristic of most modern applications. This blog post explained the step-by-step process of creating a Flutter user profile page with Firebase. We discussed various Firebase services such as Firebase Authentication for user sign-ups, Firestore for storing user data, Firebase Storage for storing and retrieving user data, as well as applying security rules to our Firebase project.

As I walked you through this blog, I hope you got a comprehensive understanding of the steps involved. Remember, practice is key. Challenge yourself to build a Flutter app with user authentication and a profile page, perhaps with extra features I didn't mention here.