# Flutter Firebase Tutorial

Firebase API's to combine Firebase and Flutter.

Explore new Flutter widgets and learn about Firebase as you continue to build a cross-platform app

BUILD A CROSS PLATFORM APP FOR IOS AND ANDROID

In this course has a heavier emphasis on using Firebase API's to combine Firebase and Flutter. There will be a lesser emphasis on creating front-end Flutter UI and more emphasis on how to build functional applications capable of being shipped to the App Store. A review of the previous course and the Dart programming language will be very helpful. That being said, you will also be introduced to some new Flutter widgets and packages.

Source Code

You can also view the source code for each section in the course.

Detail Notes

You can also view the detail notes for each section in the book.

Explore new Flutter widgets and learn about Firebase as you continue to build a cross-platform app

Flutter is a relatively new toolkit that makes it easy to build cross-platform apps that look gorgeous and is easy to use. By utilizing a platform's native components we'll build an app that can run on both iOS and Android that will look and feel like it was developed natively. Furthermore we'll see how with one single codebase, Flutter provides us with native performance, hot reload for fast development, and access to beautiful, native components.

Source Code

Review the basics of Flutter widgets by creating the app's login screen

In this section, we'll quickly review the basic UI components of Flutter called widgets. Much like Views in SwiftUI, we'll see how we can combine widgets to start building the login screen of our Flutter application.

Source Code

Customize textfields and container widgets to detect user input

In this section, we'll continue our review of Flutter widgets by finishing the remaining Login Screen UI. We'll add text fields and see how it can be used to detect user input.

Source Code

Use the GestureDetector Widget to create amazing user interactions

In this section, we'll conclude our review of Flutter widgets by adding interactivity to our buttons. We'll rely on the Flutter widget, GestureDetector, to see how we can detect taps on any Flutter widget.

Source Code

Create your first Firebase Project and download Firebase plugins for Android

In this section, we'll begin our journey into learning about Firebase and how we can leverage the products and solutions they offer to make our app more ready for distribution. We'll take a look at creating our very own Firebase project in the Firebase Console and then begin downloading all of the necessary packages and plugins to make sure we can communicate with Firebase's servers from the Android operating system.

Source Code

Configure the iOS project to use Firebase and meet the new FutureBuilder widget

In this section, we'll continue to add Firebase to our Flutter application by configuring the iOS application. We'll add the iOS app to our Firebase Console, refresh our iOS pods to use the Firebase SDKs, and see how Flutter's FutureBuilder widget can be used to create a seamless loading experience.

Source Code

Build your own authentication system using Firebase Authentication

In this section, we'll start to build our own authentication system with some help from Firebase Authentication. We'll see how to enable this option inside of our Firebase Console and then see how we can allow users to create accounts and login from the app.

Source Code

Send user verification and password reset emails from Firebase

In this section, we'll see how we can send important emails to our users from Firebase. This includes the email that lets users know an account was created with their email and we'd like for them to verify their email. The other email is sent to them if they select the Forgot Password button. Firebase is able to handle the sending of emails as well as the password reset feature.

Source Code

Detect authenticated users to choose the correct startup screen

In this section, we'll conclude our exploration into Firebase Authentication. If you've been running the app several times, you know that every time the app loads, we are always taken to the Login Screen. Even if the user is signed in, this is the case, so users end up always signing back in. What we want to do is check if a user is signed in or not. If a user is signed in, we'll automatically start the app at the Home Screen. Otherwise, we'll be taken to the Login Screen.

Source Code

Learn about Firestore and the advantages of creating a database hosted on the cloud

In this section, we'll begin to explore Firebase Firestore, or Cloud Firestore. Firestore is a database created by Firebase that is hosted on the cloud. This means that through a simple web interface, we'll be able to view all the data inside of our database and perform CRUD operations (create, read, update, and delete). Furthermore, Cloud Firestore also provides amazing API calls that make it very easy for you to perform CRUD operations from your app through Dart code. We'll start with adding the Courses data to our application.

Source Code

Learn to save data to the Cloud Firestore database using Dart

In this section, we'll start to write data to our Cloud Firestore database. First, we'll install the necessary Firestore dependencies through Flutter Pub. Then, we'll start to write user data to our database. Whenever a user creates a new account, we'll need to save their data like their user ID, the certificates and badges they earned, and the courses they have completed or viewed recently. All of this is possible with just a few lines of code as we'll see.

Source Code

Read data from Firestore to customize the Profile Screen

In this section, we'll continue to learn about the Firestore APIs by learning how to get data from Firestore and reading this to use within our app. We'll begin working on the Profile Screen and read the name and bio from Firestore to populate our app with.

Source Code

Allow users to update their profile and synchronize the changes to Firestore

As mentioned when introducing Firestore, we are able to perform CRUD (create, read, update, and delete) operations very easily with Firestore. We have taken a look at how to create and read data. Now, we'll see how we can update existing data by allowing users to change their name and bio within the Profile Screen and then synchronizing those changes over the Firestore. The actual Firebase code is very small but we'll continue to explore the AlertDialog widget and how that widget can be used to ask for user input.

Source Code

Secure your database in this thorough introduction to Cloud Firestore Security Rules

In this section, we'll take a quick break from coding in Dart and building our Flutter application to explore an important topic for any application: privacy and security. While Cloud Firestore database is powerful and easy to use, it's also important you understand how the data is kept secure. In this section, we'll explore the Security Rules and see how we can write our own rules to limit which data is readily available to users who access our data.

Source Code

Transform data from Firestore into a custom class to help populate Flutter widgets

In this section, we'll go back to our Flutter application and continue modifying our application to start using dynamic data from Firestore instead of relying on hardcoded data. We'll take a look at updating the Explore section of our application on the Home Screen. Right now, it displays two courses that we hardcoded in the previous course. By the end of this section, we'll have it display all of the courses that are listed inside our Firestore database.

Source Code

Dynamically update your widgets' content by reading from several Firestore collections

In this section, we'll continue to see how Firestore can be used to populate the content for our Flutter widgets which make up our application. We'll do this by updating the badges section of the Profile Screen to use the data inside the badges array inside our user's document in Firestore. Furthermore, we'll also update the completed courses section in our Profile Screen. This will be a little more tricky because we'll need to read data from both collections inside Firestore. Up until now, we were only relying on data from one collection.

Source Code

Store and download your assets from Firebase Storage to reduce your app's installation size

In this section, we'll take a look at Firebase Storage. Until now, we saw how to authenticate users and manage a database with Firebase Auth and Cloud Firestore. Firebase Storage allows us to upload our assets to Firebase in a storage center. This means that we can download the required assets when necessary and don't have to package them with our app. We can also update our assets without having to update our app. We'll upload our assets to Firebase Storage and then see how easy it is to download files to use within our app.

Source Code

Start combining Firebase products to elevate your app's functionality

With a proper exposure to three of the main Firebase products, it's time to start combining these products together to make our app's backend more strong. In this section, we'll see how we can combine Cloud Firestore and Firebase Storage by updating our Explore section one last time such that the illustrations are loaded from Firebase Storage rather than relying on the files on device.

Source Code

Gain access to a user's photo library on both Android and iOS

In this section, we'll begin to conclude the course by implementing the last functionality in our app (that I will walk you through). This is going to be where we let users change their profile picture by selecting an image from their photo library. In this section, we'll see how we can gain access to a user's photo library in both iOS and Android.

Source Code

Upload files to Firebase Storage directly from the Flutter application

In this section, we'll see how to upload files from our device to Firebase Storage. Furthermore, we'll wrap up everything we learned about Flutter and Firebase by taking the download URL of the uploaded file and saving it to both Cloud Firestore and Firebase Authentication.

Source Code

Buy Me a Coffee

0
Would love your thoughts, please comment.x
()
x