Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

14
Adding the Firebase and Firestore Backend

WHAT YOU WILL LEARN IN THIS CHAPTER

How to create a Firebase project
How to register the iOS and Android projects to use Firebase
How to add a Cloud Firestore database
How to structure and create a data model for the Cloud Firestore database
How to enable and add Firebase authentication
How to create Firestore security rules
How to create the Flutter client app base structure
How to add Firebase to iOS and how to add the Android projects with the Google service files
How to add the Firebase and Cloud Firestore packages
How to add the intl package to format dates
How to customize the AppBar and BottomAppBar look and feel by using the BoxDecoration and LinearGradient widgets

In this chapter, in Chapter 15, and in Chapter 16, you'll use techniques that you have learned in previous chapters along with new concepts and tie them together to create a production‐level mood‐journaling app. In the previous chapters, you created many projects that taught you different ways to implement specific tasks and objectives. In a production‐level app, you need to combine what you have learned to improve performance by redrawing only the widgets with data changes, pass state between pages and up the widget tree, handle the user authentication credentials, sync data between devices and the cloud, and create classes that handle platform‐independent logic between mobile and web apps.

Because Google has open‐sourced Flutter support for desktop and web apps, the Firebase backend services can be used for Flutter desktop and web apps, not just mobile. That's why in this chapter you'll learn how to develop a production‐level mobile app.

Specifically, you'll learn how to use authentication and persist data to a cloud database by using Google's Firebase (backend server infrastructure), Firebase Authentication, and Cloud Firestore. You'll learn how to create and set up a Firebase project using Cloud Firestore as the cloud database. Cloud Firestore is a NoSQL document database to store, query, and sync data with offline support for mobile and web apps. Did I say offline? Yes, I did. The ability of a mobile app to function while an Internet connection is not available is a must‐have feature that users expect. Another great feature of using Cloud Firestore is the ability to synchronize live data between devices automatically. The data syncing is fast, allowing collaboration between different devices and users. The amazing part of using these powerful features is that you don't have to deal with setting up and managing the server's infrastructure. This feature allows you to build serverless applications.

You'll configure the Firebase backend authentication provider, database, and security rules to sync data between multiple devices and platforms. To enable authentication and database services for the client‐side Flutter project, you'll add the firebase_auth and cloud_firestore packages. In Chapter 15 and Chapter 16 you'll learn how to implement app‐wide and local state management by using the InheritedWidget class and maximize platform code sharing by implementing the Business Logic Component pattern. You'll use app‐wide and local state management to request data from different service classes.

WHAT ARE FIREBASE AND CLOUD FIRESTORE?

Before you start configuring, let's take a look at what Firebase encompasses. Firebase consists of one platform with a multitude of products that share and work together. Firebase handles the entire backend server infrastructure connecting iOS, Android, and web apps.

Build Apps

Cloud Firestore—Store and sync NoSQL data in documents and collections between devices
Real‐time database—Store and sync NoSQL data as one large JSON tree between devices
Cloud storage—Store and serve files
Cloud functions—Run backend code
Authentication—Secure user's authentication
Hosting—Deliver web app assets

Ensure App Quality

Crashlytics—Real‐time crash reports
Performance monitoring—App performance
Test lab—Test apps on devices hosted by Google

Grow Business

In‐app messaging—Send users messages
Google Analytics—Perform app analytics
Predictions—User segmentation based on behavior
A/B testing—Optimize app experience
Cloud messaging—Send messages and notifications
Remote config—Modify the app without deploying a new version
Dynamic links—App deep links
App indexing—Drive search traffic to a mobile app

Wow, this sounds amazing, but does it cost a fortune? Actually no; Google offers the Spark Plan, which gives you free access to the majority of the products, especially Cloud Firestore. You can view the details and restrictions at https://firebase.google.com/pricing.

In this chapter, I'll focus on using Cloud Firestore to store and sync data between devices. For general information on Firebase, you can browse https://firebase.google.com.

What is Cloud Firestore? It stores data in documents organized in collections, similar to JSON. It can scale complex and hierarchical data by using subcollections within documents. You'll take a detailed look at it in the next section, “Structuring and Data Modeling Cloud Firestore.” It offers offline support for iOS, Android, and web apps. For the iOS and Android platforms, the offline persistence is enabled by default, but for the Web, the offline is disabled by default. To optimize querying data, it supports indexed queries with sorting and filtering. It can use transactions that automatically repeat until the task is completed. Data scaling is automatically handled for you. You use mobile SDKs to integrate different features of Firebase products into your apps.

Structuring and Data Modeling Cloud Firestore

To understand the Cloud Firestore data structure, let's compare it to a standard SQL Server database (see Table 14.1). The SQL Server database is a relational database management system (RDBMS) that supports table and row data modeling (Figure 14.1). The comparison is not a one‐to‐one but a guideline since the data structures differ.

TABLE 14.1: Data structure comparison

SQL SERVER DATABASE	CLOUD FIRESTORE
Table	Collection
Row	Document
Columns	Data

Schematic of SQL Server database data model. — **FIGURE 14.1**: SQL Server Database Data Model

In Cloud Firestore, a collection can contain only documents. A document is a key‐value pair and can optionally point to subcollections. Documents cannot point to another document and must be stored in collections (Figure 14.2).

Schematic of Cloud Firestore data model. — **FIGURE 14.2**: Cloud Firestore Data Model

What is the collection's responsibility? Collections are containers for documents; they hold them the same way a folder holds pages.

What is the document's responsibility? Documents hold data that is stored as a key‐value pair similar to JSON. Documents support extra data types that JSON does not support. Each document is identified by name, and they are limited to 1MB in size (see Table 14.2).

TABLE 14.2: Cloud Firestore sample data

TYPE	VALUE
Collection	`journals`
Document	`R5NcTWAaWtHTttYtPoOd`
Document data as key‐value pair	`date: "2019‐0202T13:41:12.537285"` `mood: "Happy"` `note: "Great movie."` `uid: "F1GGeKiwp3jRpoCVskdBNmO4GUN4"`

Let's take a look at the Cloud Firestore sample data as JSON objects and in the Cloud Firestore console (Figure 14.3). Notice that the document name is a unique ID that can be automatically created by Cloud Firestore, or you can manually generate it.

Screenshot of collection and document. — **FIGURE 14.3**: Collection and Document

{
  "journals":[
   {
     " R5NcTWAaWtHTttYtPoOd1":{
      "date": "2019-0202T13:41:12.537285",
      "mood":"Happy",
      "note":"Great movie."
      "uid": " F1GGeKiwp3jRpoCVskdBNmO4GUN4",
     }
   }
  ]
}

Cloud Firestore supports many data types such as array, Boolean, byte, date and time, floating‐point number, geographical point, integer, map, reference, text string, and null. One of the major advantages of using Cloud Firestore is the automatic syncing of data between devices and the ability of the client app to continue working offline while the Internet is not available.

Viewing Firebase Authentication Capabilities

Adding security to an app is extremely important in keeping the information private and safe. Firebase Authentication provides built‐in backend services accessible from the client's SDK to support full authentication. The following is a list of the currently available authentication sign‐in providers:

Email/Password
Phone
Google
Play Games (Google)
Game Center (Apple)
Facebook
Twitter
GitHub
Anonymous

Each authentication sign‐in provider is disabled by default, and you enable the providers needed for your app specs (Figure 14.4). I'll walk you through how to enable a sign‐in provider later in this chapter.

Screenshot of Firebase Authentication's sign-in providers. — **FIGURE 14.4**: Firebase Authentication's Sign‐In Providers

An important note on using the Anonymous provider is that if the user deletes the app from the device and reinstalls it, a new anonymous user is created and will not have access to the previous data. The data from the original anonymous user is still stored on the backend, but the client app has no way of knowing the original anonymous user ID since the app was deleted from the device. One example of using the Anonymous sign‐in provider is to allow the user free access to the app and allow a paid upgrade path to advanced features.

From your mobile app, you retrieve the user's authentication credentials from any of the available sign‐in providers. You pass these credentials to the client Firebase Authentication SDK, and the Firebase backend services verify whether credentials are valid and return a response to the client app. If the credentials are valid, you allow the user to access the data and pages in the app depending on the security rules that you will learn about in the next section, “Viewing Cloud Firestore Security Rules.”

Once a particular sign‐in provider is enabled, you use the Firebase Authentication SDK to create a Firebase User object saved on the Firebase backend. The Firebase User object has a set of properties that you can customize, except for the unique ID. You can customize the primary email address, name, and a photo URL (usually the user's photo or an avatar). By using the Firebase User object's unique ID, you bind all the data that the user has created to the ID.

Viewing Cloud Firestore Security Rules

To secure access to collections and documents, you implement Cloud Firestore security rules. In the previous section, you learned that you create a Firebase User object through the Firebase Authentication SDK. Once you have the Firebase User object's unique ID, you use it with Cloud Firestore security rules to secure and lock data to each user. The following code shows the security rules that you'll create for securing the Cloud Firestore database:

service cloud.firestore {
 match /databases/{database}/documents {
  match /journals/{document=**} {
   allow read, write: if resource.data.uid == request.auth.uid;
   allow create: if request.auth.uid != null;
  }
 }
}

The rules are editable from the database rules page on the Firebase console website. The rules consist of using the match statements to identify documents, with the allow expressions to control access to the documents. Every time you change the rules and save them, a history of changes is automatically created, allowing you to revert changes if needed (Figure 14.5).

Screenshot of Cloud Firestore rules. — **FIGURE 14.5**: Cloud Firestore Rules

Let's take a look at an example that requires rules to allow a user to read and write documents assigned to them. The first match /databases/{database}/documents declaration tells the rules to match any Cloud Firestore Database in the project.

match /databases/{database}/documents

The second and the main part of understanding is to use the match statement to point to the collection and expression to evaluate, as in match /journals/{document=**}. The journals declaration is the container name, and the expression to evaluate is document=** (all documents for the journals collection) wrapped inside curly brackets. Inside this particular match, you use the allow expression for the read and write privileges by using the if statement to see whether the resource.data.uid value equals the request.auth.uid. The resource.data.uid is the uid field inside the document, and the request.auth.uid is the logged‐in user's unique ID.

match /journals/{document=**} {
 allow read, write: if resource.data.uid == request.auth.uid;
}

You can break down the rules even further by using a match statement for each read or write action. For the read rule, it can be broken into get and list. For the write rule, it can be broken into create, update, and delete.

// Read
allow get: if <condition>;
allow list: if <condition>;

// Write
allow create: if <condition>;
allow update: if <condition>;
allow delete: if <condition>;

The following example uses the create rule to allow only authenticated users to add new records by checking whether the request.auth.id value is not equal to a null value:

  allow create: if request.auth.uid != null;

CONFIGURING THE FIREBASE PROJECT

You now understand how Cloud Firestore stores data and the benefits of syncing multiple devices with offline data persistence. The offline feature works by caching a copy of the app's active data, making it accessible when the device is offline. Before you can use Cloud Firestore in your app, you need to create a Firebase project.

A Firebase project is backed by the Google Cloud Platform, which allows apps to scale. The Firebase project is a container that supports sharing features such as the database, notifications, users, remote config, crash reports, and analytics (many more) between the iOS, Android, and web apps. Each account can have multiple projects, for example to separate different and unrelated applications.

TRY IT OUT Creating the Firebase Project

You need to create a Firebase project that sets up a container to start adding your Cloud Firestore database and enabling authentication. You will start by adding the iOS app, and then you'll continue by adding the Android app.

Navigate to https://console.firebase.google.com and log in to Google Firebase with your Google account. If you do not have a Google account, you can create one at https://accounts.google.com/SignUp.
Click the Add Project button in Firebase; the Add A Project dialog will open. For the project name, enter journal; the project ID is automatically created for you. Notice it takes the project name and adds a unique identifier to it like journal‐aa2f3. (Your ID will be different because each project name must be unique.)
The location of the Cloud Firestore project is automatically selected for you, but you can change it if you like. You will need to select each checkbox to accept the Google Analytics terms; then click the Create Project button.
When you are presented with the dialog showing that the new project is ready, click the Continue button.

IOS

From the main Firebase project page, click the iOS button to add Firebase to the iOS app that you created in the section “Adding Authentication and Cloud Firestore Packages to the Client App.”
Enter the iOS bundle ID, as in com.domainname.journal. The bundle ID is the reverse domain name, com.domainname, combined with the Flutter app name of journal.
Enter the optional app nickname Journal and skip the optional App Store ID since this is obtained once an app is created from Apple's iTunes Connect to submit an app for distribution approval. Click the Register App button.
Click the Download GoogleService‐Info.plist button. (You'll add the downloaded GoogleService‐Info.plist file to your Xcode project in the section “Adding Authentication and Cloud Firestore Packages to the Client App.”)
Click the Next button, and skip the Add Firebase SDK and Add Initialization Code steps. You are skipping these steps because the Firebase SDK is added in the section “Adding Authentication and Cloud Firestore Packages to the Client App.”
Click Skip This Step in the Run Your App To Verify Installation step.
On the main Firebase project page, click the Add App button.

ANDROID

Click the Android button to add Firebase to the Android project that you created in the section “Adding Authentication and Cloud Firestore Packages to the Client App.”
Enter the Android package name, such as com.domainname.journal. The bundle ID is the reverse domain name, com.domainname, combined with a Flutter app name of journal. You'll create the Flutter app in the section “Adding Authentication and Cloud Firestore Packages to the Client App.”
Enter the optional app nickname Journal and skip the step of optional debug signing certificate SHA‐1. Click the Register App button.
Click the Download googleservices.json button. (You'll add the downloaded googleservices.json file to your Android project in the section “Adding Authentication and Cloud Firestore Packages to the Client App.”)
Click the Next button and skip the Add Firebase SDK step. You are skipping this step because the Firebase SDK is added in the section “Adding Authentication and Cloud Firestore Packages to the Client App.”
Click Skip This Step in the Run Your App To Verify Installation step.

You will be automatically brought to the main Firebase project page, showing the iOS and Android projects you just added.

HOW IT WORKS

Navigate to the Firebase console panel at https://console.firebase.google.com to add or select existing projects. When you add a project and give it a name, a unique project ID is automatically created with the option to rename it. Once the project is created, the project ID cannot be changed. The server's location is automatically chosen, but you have the option to change it.

Once a Firebase project is created, you register the iOS and Android projects to use Firebase. To register each project, you enter com.domainname.journal for the iOS bundle ID and the Android package name. For the iOS project, you download the GoogleService‐Info.plist file and for the Android project the googleservices.json file. These files are added to the Flutter app in the Xcode and Android projects in the section “Adding Authentication and Cloud Firestore Packages to the Client App.”

ADDING A CLOUD FIRESTORE DATABASE AND IMPLEMENTING SECURITY

You've learned how to create a Firebase project, making it possible to add the Cloud Firestore database and Firebase Authentication. You learned about the different available sign‐in methods, and in this section, you'll walk through how to implement security rules and enable an authentication sign‐in method—specifically, an email/password authentication provider.

TRY IT OUT Creating the Cloud Firestore Database and Enabling Authentication

In this exercise, you'll learn how to enable Firebase Authentication, create a Cloud Firestore database, and implement security rules to keep the data private for each user.

Navigate to https://console.firebase.google.com and select the journal project.
From the menu on the left, click the Authentication link in the Develop section. If the Develop section is closed, click the Develop link to open the submenu. Click the Sign‐in Method tab showing a list of available sign‐in providers.
Click the Email/Password option, click Enable to turn on the feature, and click the Save button.
In the left menu, click the Database link and click the Create Database (Cloud Firestore) button.
In the Security Rules For Cloud Firestore dialog, leave the locked mode radio button selected and click the Enable button. The locked mode creates the basic security rules with the access locked for reading and writing privileges.

The following code shows the default security rules that are automatically created when you click the Enable button. The current security rules deny all read and write requests, making it completely safe but also inaccessible, which you will modify in step 6.
```
service cloud.firestore {
 match /databases/{database}/documents {
  match /{document=**} {
   allow read, write: if false;
  }
 }
}
```
Tap the Rules tab to edit the default locked rules and change match /{document=**} to match /journals/{document=**}. {document=**} matches any document, but you are going to use a granular approach by matching the journals collection and document to the logged‐in user ID. This approach allows you to restrict each document to each user ID, keeping the data secure for the rightful owner of the data.
Change allow read, write: if false; to allow read, write: if resource.data.uid == request.auth.uid;, restricting the data field uid to match the logged‐in uid. The resource.data.uid is the uid field inside the document, and the request.auth.uid is the logged‐in user unique ID. Add allow create: if request.auth.uid != null; to allow creating new records if the user is authenticated.
```
service cloud.firestore {
 match /databases/{database}/documents {
  match /journals/{document=**} {
   allow read, write: if resource.data.uid == request.auth.uid;
   allow create: if request.auth.uid != null;
  }
 }
}
```
Note that a history log of changes is automatically created, allowing the reverting of changes if needed.

HOW IT WORKS

Navigate to https://console.firebase.google.com and select the journal project. Navigate to the Authentication page and select the Sign‐in Method tab to enable and disable sign‐in providers. Navigate to the Database page to create or edit databases and in this case Cloud Firestore. From the Database page, select the Rules tab to view or modify current security rules. With every saved edit, the history of changes is automatically created, making it easy to revert changes if needed.

BUILDING THE CLIENT JOURNAL APP

The process of creating the mood‐journaling app spans from this chapter to Chapter 16. In this section, you'll create the base structure of the app and configure the iOS and Android projects to use Firebase Authentication and the Cloud Firestore database. You'll modify the basic look and feel of the app by using color gradients.

The goal of the mood‐journaling app is to have the ability to list, add, and modify journal entries by collecting a date, a mood, a note, and the user's ID. You'll learn to create a login page to authenticate users through the email/password Firebase Authentication sign‐in provider. The main presentation page implements a ListView widget by using the separated constructor sorted by DESC (descending) date, meaning last entered record first. The ListTile widget easily formats how you'll display the List of records. The journal entry page uses the showDatePicker widget to select a date from a calendar, a DropdownButton widget to select from a list of moods, and a TextField widget to enter the note.

Adding Authentication and Cloud Firestore Packages to the Client App

It's time to create the Flutter app and add the Firebase Authentication and Cloud Firestore SDKs by installing the Firebase Flutter packages. The Flutter team authors the different Firebase packages, and like other packages, the full package source code is available on the appropriate package's GitHub page.

You'll install the firebase_auth, cloud_firestore, and intl packages. You'll download the Google service files (config) for iOS and Android that contain properties needed to access the Firebase products from the client app.

TRY IT OUT Creating the Journal App

In this example, you'll build a production‐level journal app similar to the one in Chapter 13, but instead, it uses Firebase Authentication for security and the Cloud Firestore database for storing and syncing data. The structure of how you read and save data is completely different. You'll also add mood tracking to each journal entry. You'll use some new and familiar packages in this exercise.

To add security to your journal app, you'll use the firebase_auth package, which provides authentication.
To add data‐storage capabilities, you'll use the cloud_firestore package, which provides cloud syncing and storing.
To format dates, you'll use the intl package, which provides internationalization and localization. You learned how to use it in Chapter 13 in the “Formatting Dates” section.

Create a new Flutter project and name it journal. You can follow the instructions in Chapter 4, “Creating a Starter Project Template.”
Note that since this app continues in the next two chapters, to keep things simple, the project name does not start with the chapter number. Naming the project journal also results in the package name com.domainname.journal, matching the iOS bundle ID and Android package name. Since you are using Cloud Firestore, the package name must exactly match what you entered when you registered the iOS and Android projects in the Firebase console. As a side note, you can also manually change the package name when creating a new Flutter project.

For this project, you need to create the pages, classes, services, models, and blocs folders.

Open the pubspec.yaml file to add resources. In the dependencies: section, add the firebase_auth:^0.11.1+6 and cloud_firestore:^0.12.5 and intl:^0.15.8 declarations. Note that your package's version may be higher.

dependencies:
 flutter:
  sdk: flutter

 # The following adds the Cupertino Icons font to your application.
 # Use with the CupertinoIcons class for iOS style icons.
 cupertino_icons: ^0.1.2

 firebase_auth: ^0.11.1+6
 cloud_firestore: ^0.12.5
 intl: ^0.15.8

Click the Save button, and depending on the editor you are using, it automatically runs the flutter packages get; once finished, it shows the message Process finished with exit code 0. If it does not automatically run the command for you, open the Terminal window (located at the bottom of your editor) and type flutter packages get.
From the Flutter project, open the iOS Xcode project to add Firebase. From Android Studio, click the menu bar and select Tools ➪ Flutter ➪ Open iOS Module In Xcode.
Drag the downloaded GoogleService‐Info.plist file to the Runner folder in the Xcode project.
In the next dialog, finish adding the GoogleService‐Info.plist file and make sure Copy Items If Needed is checked, the Create Folder References radio button is selected, and the Add To Targets ➪ Runner option is checked. The iOS Xcode project is now configured to handle Firebase and Firestore. Once the file is copied, close Xcode.
From the Flutter project, open the Android Studio project to add Firebase. From Android Studio, click the menu bar and select Tools ➪ Flutter ➪ Open For Editing In Android Studio.
Drag the downloaded google‐services.json file to the App folder in the Android project. If you do not see the App folder, make sure in the Android Studio tool window that the Project view (top left) is selected, not the Android view.
Finish adding the google‐services.json file and click the OK button.
For the Android project, you need to edit two files manually. For the first file, open the app‐level build.gradle file located at android/app/build.gradle. Add to the bottom of the file the google‐services gradle plugin by specifying apply plugin: 'com.google.gms.google‐services'. In this app‐level build.gradle file, make sure you are using compileSdkVersion 28, minSdkVersion 16, and targetSdkVersion 28 and save.

To avoid receiving “.dex file cannot exceed 64 error” when you try to run the Flutter app for Android, you need to add the multiDexEnabled true in the defaultConfig section and save. Note that this step may not be needed in future updates. You can review the Android Studio multidex user guide page at https://developer.android.com/studio/build/multidex.

android {
  compileSdkVersion 28

  sourceSets {…}

  lintOptions {…}

  defaultConfig {
    applicationId "com.domainname.journal"
    minSdkVersion 16
    targetSdkVersion 28
    // …
    // Enable if you get error in Flutter app - .dex file cannot exceed 64K
    multiDexEnabled true // Enable
  }

  buildTypes {…}
}

flutter {…}

dependencies {
  // …}

// Add at the bottom of the file
apply plugin: 'com.google.gms.google-services'

For the second file, open the project‐level build.gradle file located at android/build.gradle. Add to the dependencies the classpath of the google‐services plugin and save.

buildscript {
 // …
 dependencies {
  // …
  // Add the following line:
  classpath 'com.google.gms:google-services:4.2.0' // googleservices plugin
 }
}

To avoid receiving AndroidX errors, edit the project‐level gradle.properties file by adding the following two lines and save the file. Note that this manual step may not be needed in future updates. Enabling AndroidX compatibility depends on the plugins requirement.
```
android.useAndroidX=true
android.enableJetifier=true
```
You will see a yellow bar with a notice that the gradle files have changed. Click the Sync Now button, and once the process is done, close the Android project.

HOW IT WORKS

You declared the firebase_auth, cloud_firestore, and intl packages in your pubspec.yaml file. The firebase_auth package gives you the ability to use Firebase Authentication to secure the application. The cloud_firestore package gives you the ability to use the Cloud Firestore database to sync and store data on the cloud. The intl package gives you the ability to format dates.

You used Xcode to import the GoogleService‐info.plist file to the iOS project. You used Android Studio to import the google‐services.json file to the Android project. For the Android project, you modified the project and app‐level build.gradle files to enable the Firebase plugins. The Google service files import all the properties needed to access the Firebase project products.

From the Firebase console, you registered the iOS and Android projects with the iOS bundle ID and Android package name of com.domainname.journal, matching exactly the Flutter's project package name of com.domainname.journal.

Adding Basic Layout to the Client App

In the previous section, you learned how to add and configure Firebase Authentication and the Cloud Firestore database. The next step is to work on the Flutter project to customize the look and feel of the journal app.

You'll customize the app's background color by setting the MaterialApp canvasColor property to a light shade of green. The AppBar and BottomAppBar customizations show a color gradient from light green to a very light shade of green, merging with the app's background color. To achieve the color effect, set the BoxDecoration gradient property by using a LinearGradient widget that you learned in Chapter 6, “Using Common Widgets.”

TRY IT OUT Adding a Basic Layout to the Journal App

In this section, continue to edit the journal project by customizing the app's colors and look and feel, giving it that professional look.

Open the main.dart file. Modify the MaterialApp title property to Journal and modify the ThemeData primarySwatch property to Colors.lightGreen. Add the canvasColor property and set the color to Colors.lightGreen.shade50. Add the bottomAppBarColor property and set the color to Colors.lightGreen.
```
return MaterialApp(
 debugShowCheckedModeBanner: false,
 title: 'Journal',
 theme: ThemeData(
  primarySwatch: Colors.lightGreen,
  canvasColor: Colors.lightGreen.shade50,
  bottomAppBarColor: Colors.lightGreen,
 ),
 home: Home(),
);
```
Open the home.dart file, set the AppBar title property's Text widget to Journal, and set the TextStyle color property to Colors.lightGreen.shade800.
To customize the AppBar background color with a gradient, remove the AppBar widget shadow by setting the elevation property to 0.0. To increase the AppBar's height, set the bottom property to a PreferredSize widget with the child property as a Container widget and the preferredSize property to Size.fromHeight(32.0).
Set the flexibleSpace property to a Container widget, with the decoration property set to a BoxDecoration widget.
Set the BoxDecoration gradient property to a LinearGradient with the colors property set to a list of [Colors.lightGreen, Colors.lightGreen.shade50].

Set the begin property to Alignment.topCenter and the end property to Alignment.bottomCenter. The LinearGradient effect draws the AppBar color from a lightGreen and gradually fades to a lightGreen.shade50 color.

  appBar: AppBar(
   title: Text('Journal',
     style: TextStyle(color: Colors.lightGreen.shade800)),
   elevation: 0.0,
   bottom: PreferredSize(
     child: Container(), preferredSize: Size.fromHeight(32.0)),
   flexibleSpace: Container(
    decoration: BoxDecoration(
     gradient: LinearGradient(
      colors: [Colors.lightGreen, Colors.lightGreen.shade50],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
     ),
    ),
   ),
  ),

Add an IconButton widget to the AppBar actions property. Set the icon property to Icons.exit_to_app, with the color property set to Colors.lightGreen.shade800.

Add to the onPressed property a TODO: comment with a reminder to add a method to sign out the current user.

   actions: <Widget>[
    IconButton(
     icon: Icon(
      Icons.exit_to_app,
      color: Colors.lightGreen.shade800,
     ),
     onPressed: () {
      // TODO: Add signOut method
     },
    ),
   ],

Add the Scaffold bottomNavigationBar property and set it to a BottomAppBar widget. To customize the BottomAppBar background color with a gradient, remove the BottomAppBar widget shadow by setting the elevation property to 0.0. Set the BottomAppBar child property to a Container widget with the height property set to 44.0.
Set the Container decoration property to a BoxDecoration widget. Set the BoxDecoration gradient property to a LinearGradient, with the colors property set to a list of [Colors.lightGreen.shade50, Colors.lightGreen].

Set the begin property to Alignment.topCenter, and set the end property to Alignment.bottomCenter. The LinearGradient effect draws the AppBar color from a lightGreen.shade50 and gradually fades to a lightGreen color.

  bottomNavigationBar: BottomAppBar(
   elevation: 0.0,
   child: Container(
    height: 44.0,
    decoration: BoxDecoration(
     gradient: LinearGradient(
      colors: [Colors.lightGreen.shade50, Colors.lightGreen],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
     ),
    ),
   ),
  ),

Add the Scaffold floatingActionButtonLocation property and set it to FloatingActionButtonLocation.centerDocked.
```
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
```
The FloatingActionButton is responsible for adding new journal entries. Add the Scaffold floatingActionButton property and set it to a FloatingActionButton widget, with the tooltip property set to Add Journal Entry and with the backgroundColor property set to Colors.lightGreen.shade300. Set the child property to Icons.add.

Add the FloatingActionButton onPressed property and mark it with the async keyword and a TODO: comment with a reminder to add a method to add journal entries.

  floatingActionButton: FloatingActionButton(
   tooltip: 'Add Journal Entry',
   backgroundColor: Colors.lightGreen.shade300,
   child: Icon(Icons.add),
   onPressed: () async {
    // TODO: Add _addOrEditJournal method
   },
  ),

HOW IT WORKS

You modified the MaterialApp ThemeData canvasColor property to light green and a bottomAppBarColor property to light green. You customized the home page AppBar and BottomAppBar widgets to show a light green color gradient. You customized the BoxDecoration gradient property to use a LinearGradient to achieve smooth gradient color shading. You added to the AppBar actions property an IconButton that is used to log out a user. To dock the FloatingActionButton to the BottomAppBar widget, you added a floatingActionButtonLocation property set to centerDocked. You added a FloatingActionButton widget that is used to add a new journal entry.

Adding Classes to the Client App

You'll need to create two classes to handle formatting dates and tracking the mood icons. The FormatDates class uses the intl package to format dates. The MoodIcons class stores reference to the mood icons title, color, rotation, and icon.

TRY IT OUT Adding the FormatDates and MoodIcons Classes

In this section, continue to edit the journal project by adding the FormatDates and MoodIcons classes.

Create a new Dart file in the classes folder. Right‐click the classes folder, select New ➪ Dart File, enter FormatDates.dart, and click the OK button to save.

Import the intl.dart package and create the FormatDates class. You learned how to use the DateFormat class in Chapter 13's “Formatting Dates” section. Add the dateFormatShortMonthDayYear, dateFormatDayNumber, and dateFormatShortDayName methods.

import 'package:intl/intl.dart';

class FormatDates {
 String dateFormatShortMonthDayYear(String date) {
  return DateFormat.yMMMd().format(DateTime.parse(date));
 }

 String dateFormatDayNumber(String date) {
  return DateFormat.d().format(DateTime.parse(date));
 }

 String dateFormatShortDayName(String date) {
  return DateFormat.E().format(DateTime.parse(date));
 }
}

Create a new Dart file in the classes folder. Right‐click the classes folder, select New ➪ Dart File, enter mood_icons.dart, and click the OK button to save. Import the material.dart package and create the MoodIcons class.
```
class MoodIcons {
}
```
Add the title, color, rotation, and icon variables and mark them final. Depending on the mood, each icon is shown by a different color and rotation; for example, the happy icon is rotated toward the left, and the sad icon is rotated toward the right.
Add a new line and enter the MoodIcons constructor with named parameters by enclosing them in the curly brackets ({}). Reference each title, color, rotation, and icon variable by using syntactic sugar to access the values with the this keyword, referring to the current state in the class.
```
class MoodIcons {
 final String title;
 final Color color;
 final double rotation;
 final IconData icon;

 const MoodIcons({this.title, this.color, this.rotation, this.icon});
}
```
You'll finish adding methods to the MoodIcons class in step 8 because they need access to the _moodIconsList variable containing the list of mood‐setting icons. The list contains five mood configurations containing title, color, rotation, and icon.
Add a line after the MoodIcons class and declare the _moodIconsList variable as a List<MoodIcons> using the const keyword for performance gain since the list will not change. Initialize the _moodIconsList with the list of MoodIcons using the const keyword.

Add five MoodIcons() classes using the const keyword and populate the constructor with the following values:

const List<MoodIcons> _moodIconsList = const <MoodIcons>[
 const MoodIcons(title: 'Very Satisfied', color: Colors.amber, rotation: 0.4, icon: Icons.sentiment_very_satisfied),
 const MoodIcons(title: 'Satisfied', color: Colors.green, rotation: 0.2, icon: Icons.sentiment_satisfied),
 const MoodIcons(title: 'Neutral', color: Colors.grey, rotation: 0.0, icon: Icons.sentiment_neutral),
 const MoodIcons(title: 'Dissatisfied', color: Colors.cyan, rotation: -0.2, icon: Icons.sentiment_dissatisfied),
 const MoodIcons(title: 'Very Dissatisfied', color: Colors.red, rotation: -0.4, icon: Icons.sentiment_very_dissatisfied),
];

Go back inside the MoodIcons class and add the getMoodIcons, getMoodColor, getMoodRotation, and getMoodIconsList methods to retrieve the appropriate icon attribute values. The first three methods use the List object's indexWhere method to find the matching icon attributes. The last method returns the full list of mood icons.

IconData getMoodIcon(String mood) {
 return _moodIconsList[_moodIconsList.indexWhere((icon) => icon.title == mood)].icon;
}

Color getMoodColor(String mood) {
 return _moodIconsList[_moodIconsList.indexWhere((icon) => icon.title == mood)].color;
}

double getMoodRotation(String mood) {
 return _moodIconsList[_moodIconsList.indexWhere((icon) => icon.title == mood)].rotation;
}

List<MoodIcons> getMoodIconsList() {
 return _moodIconsList;
}

SUMMARY

In this chapter, you learned how to persist and secure data over app launches by using Google's Firebase, Firebase Authentication, and Cloud Firestore. Firebase is the infrastructure that doesn't require the developer to set up or maintain backend servers. The Firebase platform allows you to connect and share data between iOS, Android, and web apps. You configure the Firebase project with the online web console. In this chapter, you registered both the iOS and Android projects with the com.domainname.journal package name to connect the client app to the Firebase products.

You created a Cloud Firestore database that safely stores the client app's data in a cloud database. Cloud Firestore is a NoSQL document database to store, query, and sync data with offline support for mobile and web apps. You structure and data model Cloud Firestore databases by using a collection to store documents that contain data as a key‐value pair similar to JSON.

Securing the Cloud Firestore database is done by creating Cloud Firestore security rules. The security rules consist of using the match statements to identify documents, with the allow expression to control access.

Firebase Authentication provides built‐in backend services that are accessible from the client's SDK, which supports full user authentication. Enabling the email/password authentication sign‐in provider allows users to register and log in to the app. By passing the user credentials (email/password) to the client's Firebase Authentication SDK, the Firebase backend services verify whether the credentials are valid and return a response to the client app.

You created the base structure of the client mood‐journaling app and connected it to the Firebase services by installing the firebase_auth and cloud_firestore packages. You configured the client iOS and Android projects to use Firebase. You added the GoogleService‐Info.plist file to the iOS project and the google‐services.json file to the Android project. The Google service files contain properties needed to access the Firebase products from the client app. You modified the base look and feel of the app by using the BoxDecoration widget, with the gradient property set to a LinearGradient to create a smooth light green color gradient.

In the next chapter, you'll learn how to implement app‐wide and local state management by using the InheritedWidget class and how to maximize platform code sharing and separation by implementing the Business Logic Component pattern. You'll use state management to implement Firebase Authentication, access the Cloud Firestore database, and implement service classes.

WHAT YOU LEARNED IN THIS CHAPTER

TOPIC	KEY CONCEPTS
Google's Firebase	Firebase consists of one platform with many products that work together as a backend server infrastructure connecting iOS, Android, and web apps.
Cloud Firestore	You learned how to structure and data model the Cloud Firestore database. Cloud Firestore is a NoSQL document database to store, query, and sync data with offline support.
Firebase Authentication	Firebase Authentication provides built‐in backend services accessible from the client's SDK, supporting full authentication.
Cloud Firestore Security Rules	To secure access to data, you learned how to implement Cloud Firestore security rules. Rules consist of using the `match` statements to identify documents with the `allow` expressions.
Cloud Firestore collection	A collection can contain only documents.
Cloud Firestore document	A document is a key‐value pair and can optionally point to subcollections. Documents cannot point to another document and must be stored in collections.
`firebase_auth` package	You learned how to add the `firebase_auth` package to enable authentication in the Flutter app.
`cloud_firestore` package	You learned how to add the `cloud_firestore` package to provide database storing and cloud syncing in the Flutter app.
`GoogleService‐Info.plist` file	You learned how to add the `google‐services.json` file to the iOS Xcode project to connect the client app to the Firebase services.
`google‐services.json` file	You learned how to add the `google‐services.json` file to the Android project to connect the client app to the Firebase services. For the Android project, you also learned how to modify the project and app‐level gradle files to use Firebase Authentication and Cloud Firestore.
Flutter app base layout	You learned how to use the `BoxDecoration` widget by setting the `gradient` property to a `LinearGradient` list of colors to enhance the look and feel of the app.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 14 Adding the Firebase and Firestore Backend

Create new playlist

Sign In

Sign Up

WHAT YOU WILL LEARN IN THIS CHAPTER

WHAT ARE FIREBASE AND CLOUD FIRESTORE?

Structuring and Data Modeling Cloud Firestore

Viewing Firebase Authentication Capabilities

Viewing Cloud Firestore Security Rules

CONFIGURING THE FIREBASE PROJECT

ADDING A CLOUD FIRESTORE DATABASE AND IMPLEMENTING SECURITY

BUILDING THE CLIENT JOURNAL APP

Adding Authentication and Cloud Firestore Packages to the Client App

Adding Basic Layout to the Client App

Adding Classes to the Client App

SUMMARY

WHAT YOU LEARNED IN THIS CHAPTER

Table of Contents for
14 Adding the Firebase and Firestore Backend