This course is available as part of the raywenderlich.com Professional subscription. To learn more click here
Pro

Beginning FlutterFire

Aug 30 2022 · Video Course (1 hr, 42 mins) · Beginner

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!

Version

  • Dart 2.16, Flutter 3.0, Visual Studio Code 1.69

Create a FlutterFire App

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.

1

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.

2

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

3

Add Authentication to Your App

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.

4

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.

5

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.

6

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.

7

Read & Write Data with the Cloud Firestore

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.

8

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.

9

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

10

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

11

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.

12

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

13

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

14

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.

15

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.

16

Save Pictures to Cloud Storage

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.

17

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.

18

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.

19

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.

20

Add Notifications with Firebase Cloud Messaging

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”.

21

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

22

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

23

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.

24

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

Contributors

Comments