Using Firebase

Firebase is a set of tools you can leverage to build scalable applications in the cloud. Those tools include databases, file storage, authentication, analytics, notifications, and hosting.

In this chapter, you will start by configuring a Firebase project, and then you will see how to use sign-in, add analytics, synchronize data across multiple devices with Cloud Firestore, send notifications to your users, and store data in the cloud.

As a bonus, a backend created with Firebase can scale over Google server farms, giving it access to virtually unlimited resources and power. There are several advantages to using Firebase as a backend for your Flutter apps: arguably the most important is that Firebase is a Backend as a Service (BAAS), meaning you can easily create backend (or server-side) applications without worrying about the platform and system setup, saving you from writing most of the code that you usually need in order to have a working, real-world app. This...

Configuring a Firebase app

Before using any Firebase service in your app, a configuration process is required. The tasks vary, depending on the system where the app will be installed. In this recipe, you will see the configuration required in Android and iOS. After the configuration, you can add all Firebase services, including data and file storage, sign-in, and notifications.

Getting ready

In this recipe, you will create a new project. A Google account is required to use Firebase, and this is a prerequisite for all recipes in this chapter.

How to do it...

In this recipe, you will see how to configure a Flutter app so that you can use Firebase services. This is a two-part task: first, you will create a new Firebase project, and then you will configure a Flutter app to connect to the Firebase project.

To create a new Firebase project:

1. Open your browser at the Firebase console at https://console.firebase.google.com/.
2. Enter your Google credentials...

Creating a login screen

One of the most common features that apps require when connecting to a backend service is an authentication (login) form. Firebase makes creating a secure user login form extremely easy, using the FirebaseAuth service.

In this recipe, you will create a login form that uses a username and a password to authenticate the user. But instead of creating the user interface manually, we’ll use the firebase_ui_auth package to build our login screen.

Getting ready

To follow along in this recipe, you need to complete the previous recipe, Configuring a Firebase app.

How to do it...

In this recipe, you will add authentication with a username and password, and you will allow users to sign up and sign in. Perform the following steps:

1. From the Firebase console at https://console.firebase.google.com/, open your project and go to the Authentication option inside the Build section of the project’s menu, as shown in Figure 13.4....

Adding Google Sign-in

While dealing with user authentication with a custom user ID and password is quite common, several users prefer using a single authentication provider to access multiple services. One of the great features you can leverage when using Firebase authentication is that you can easily include authentication providers, such as Google, Apple, Microsoft, and Facebook.

In this recipe, you will see how to add Google authentication to your app.

Getting ready

To follow along with this recipe, you need to complete the previous two recipes, Configuring a Firebase app and Creating a login screen.

How to do it...

In this recipe, you will make the Google Sign-in service available to your users.

The first task required to add third-party sign-in features is to enable them in your Firebase project:

1. From the Firebase console, in the Authentication page on your project, get to the Sign In method page.
2. In the Sign-in providers table, click...

Customizing Sign in

While having fully functional sign-in features with very little code is a great achievement in itself, in most cases you will need to customize your login and registration user interfaces, for example, by adding a logo or some text.

In this recipe, you will add an image, a title, and a footer to your sign-in screens.

Getting ready

To follow along with this recipe, you need to complete the previous recipes in this chapter.

How to do it...

First you will customize the sign-in by adding a logo and some text:

1. Download a free image for your project (you can use https://bit.ly/logo_ico).
2. At the root of your project, create a new folder called assets.
3. Save the image you have downloaded, and rename it logo.jpg.
4. In your pubspec.yaml, uncomment the assets section, and add the assets folder as a source:

     assets:
       - assets/
   

5. In the authenticationscreen.dart file, in the build method, set the headerBuilder...

Integrating Firebase Analytics

One of the most relevant features of Firebase is getting real feedback about how your app is used, and for that, you can use Firebase Analytics.

Firebase Analytics is an incredibly powerful tool, easy to set up and use, and can give you invaluable information about your users and your app. In this recipe, you will set up a custom event and log it into Firebase Analytics.

Getting ready

To follow along with this recipe, you need to complete the previous recipes in this chapter.

How it works...

You will now add firebase_analytics to your app and activate a custom event:

1. In a Terminal window, in your project’s directory, add the dependency to Firebase Analytics:

   flutter pub add firebase_analytics
   

2. In the screens folder in your project, create a new file, called happy_screen.dart.
3. At the top of the new file, import material.dart and firebase_analytics:

   import 'package:flutter/material...

Using Firebase Cloud Firestore

When using Firebase, you can choose between two database options: Cloud Firestore and Realtime Database. Both are solid and efficient NoSQL databases.

In short, you can use both SQL and NoSQL databases to store and manage data.

SQL databases, also called Relational Databases, store data in tables and use a fixed schema, meaning that columns and data types must be defined before storing any data. You generally prefer SQL databases for data that requires complex queries and tasks that involve joining multiple tables.

NoSQL databases store data in different formats, like key-value pairs, documents, or graphs, and don’t require a fixed schema. NoSQL is usually preferred for unstructured or semi-structured data, and simple read/write tasks.

Cloud Firestore is the newer and recommended option in most cases for new projects, so that’s the tool you’ll be using in this recipe.

Getting ready

To follow...

Sending push notifications with Firebase Cloud Messaging (FCM)

push notifications are an extremely important feature for an app. They are messages sent to your app’s users that they can receive even when your app is not open. You can send notifications about anything: offers, updates, discounts, and any other type of message. This may help you keep users’ interest in your app. In this recipe, you will see how to leverage Firebase Messaging to send messages to your app’s users.

Getting ready

To follow along with this recipe, you need to complete the first two recipes in this chapter, Configuring a Firebase app and Creating a login form.

How to do it...

In this recipe, you will see how to send notification messages when your app is in the background. Please note that this code will not work on an iOS simulator (although it works perfectly on a physical device):

1. Add the firebase_messaging plugin to your app.
2. At the top of the main...

Storing files in the cloud

Firebase Cloud Storage is a service that allows the uploading and downloading of files, such as images, audio, video, or any other content. This may add a powerful feature to your apps.

Getting ready

To follow along with this recipe, you need to complete the first two recipes in this chapter, Configuring a Firebase app and Creating a login form.

Depending on your device, you may need to configure the permissions to access your images library. See the setup procedure at https://pub.dev/packages/image_picker.

How to do it...

In this recipe, you will add a screen that allows images to be uploaded to the cloud:

1. In your Firebase console, click on the Storage link in the build section.
2. Click on the Get started button.
3. In the prompt window, select Start in test mode and click Next.
4. On the following page, click Done.
5. In your Flutter project, add the latest versions of the firebase_storage, image_picker, and...

Summary

In this chapter, you saw how to integrate Firebase with Flutter. First, you saw to create a new Firebase project and add Firebase to a Flutter app.

Then, you learned how to create an authentication screen leveraging Firebase Authentication and FirebaseUI Auth. You also saw ways to customize the authentication process and how to integrate third-party providers, like Google Sign-in, for a smoother login experience.

Next, you saw how to integrate Firebase Analytics into your apps to gain insights into user behavior and app performance.

To save data in the cloud, we covered the Firebase Cloud Firestore, a document-based database that makes it easy to store and retrieve data in an app. You saw how to use collections and documents.

Push notifications are an important feature for mobile apps, and FCM makes it easy to send push notifications to users. You learned how to set up your app to receive push notifications when your app is in the background.

Finally,...