Beginning FlutterFire

Firebase can help you add back-end features to your Flutter app without writing any back-end code. It provides several tools that you can immediately use, like authentication, a centralized database, file storing in the cloud, and sending notifications. In this course you’ll learn how to configure and use FlutterFire, a set of plugins to integrate Firebase within your Flutter apps! By Simone Alessandria.

Leave a rating/review
Download materials
Save for later
Comments
Share

Who is this for?

Developers who want to understand and use Firebase features in Flutter

Covered concepts

  • Firebase configuration in a Flutter app
  • FlutterFire UI
  • Firebase Authentication
  • Cloud Firestore Database
  • Firebase Cloud Storage
  • Firebase Cloud Messaging

Part 1: Create a FlutterFire App

01
Toggle description

Storing data with the Firestore database, enabling authentication, sending and receiving notifications and storing files are some of the great features you can leverage from your Flutter app with Firebase. The good news is they are easy to implement and almost code free.

Toggle description

In order to use Firebase in your Flutter apps you need a Firebase project. Let’s have a look at the steps required to create it. This is a prerequisite before creating your Flutter app.

Create a new Flutter project and install the FlutterFire CLI, a tool that makes installing FlutterFire very easy. Leverage the CLI to add Firebase to your project and run the app to make sure everything works

Part 2: Add Authentication to Your App

Toggle description

Add email and password authentication to your Firebase project, understand the other options including third party authentication, then add the required dependencies in your pubspec.yaml file.

Toggle description

FlutterFire UI contains tools that help you create your user interface that requires Firebase integration. You will create a Sign-In screen and connect it to Firebase Authentication, then add a logo to customize the screen.

Toggle description

At some time all of us have used a Forgot Password tool. You will add a new screen to your app, that allows users to type their email through Firebase. You will then send a password reset email.

Toggle description

While default labels may be right for most apps, you sometimes need to customize the most common labels for your projects. Learn how to edit your labes with a class implementing DefaultLocalizations.

Part 3: Read & Write Data with the Cloud Firestore

Toggle description

Learn how the Cloud Firestore can safely and efficently store your data in the Cloud. You will also create a new Cloud Firestore database in your Firebase project and understand the safety rules you can add for production apps.

Toggle description

Before using a Firestore database you need to create it. In this lesson you’ll see how to create a new Firestore database and add it to your app.

Toggle description

Create a model class for the activities that you will save into a Firestore collection, and later retrieve from it.

Toggle description

Now that you’ve created the Activity model class, you can finally write the methods that allow retrieving and writing data to the database.

Toggle description

Create the screen that contains the list of activities that users will see when they open the app. This screen will contain a ListView with the list of activities; from there users will also be able to get to the activity detail screen, which will allow creating a new activity, or updating an existing one.

Toggle description

In this lesson you will create the Activity Detail screen that allows users to insert a new activity and update an existing one.

In this lesson you will link your helper methods to the User Interface, and insert and update activities into the Firestore Database.

Toggle description

See how to delete an item from a ListView leveraging a Dismissible widget, that show an animation when the user swipes an item from the ListView.

Toggle description

See how to delete an item from a ListView leveraging a Dismissible widget, that show an animation when the user swipes an item from the ListView.

Part 4: Save Pictures to Cloud Storage

Toggle description

Like the other Firebase services, you need to setup and configure Cloud Storage before using it in your projects. You will see how to create the default storage bucket in your Firebase project and set the required configuration to your Flutter app.

Toggle description

In this lesson you will see how to use the local file storage to access your device pictures. From there you’ll select a picture that you’ll later send to the Cloud Storage.

Toggle description

Once you’ve added a picture in your screen, you can then upload it asynchronously to the Cloud Storage service when saving data in your app.

Toggle description

Once files have been uploaded to the Cloud Storage, you also need to retrieve them into your app and show them to the users. In this lesson you’ll see the steps required to download files from Cloud Storage.

Part 5: Add Notifications with Firebase Cloud Messaging

Toggle description

Push Notifications are an invaluable tool to engage your users. The Firebase tool that enables sending messages and notifications to your app is called “Cloud Messaging”.

Toggle description

When receiving notifications your app may be in the foreground, background or terminated. Learn how to react to notifications in each of these states.

Toggle description

iOS requires specific permissions before receiving notifications. Learn how to setup your iOS device with XCode and in your Flutter project.

When testing notifications in your Flutter projects a very useful tool is the Firebase console. In this lesson you’ll see how to send notifications through the Firebase console and then show them in your app.