Create your own app with Flutter

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.

Download the videos and assets to refer and learn offline without interruption.

Firebase API's to combine Firebase and Flutter

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.

Reviewing Widgets

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.

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.

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

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

Firebase for iOS

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.

Introduction to 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.

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

Dynamic Login with Firebase

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.

Introduction to Cloud Firestore

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.

Writing Data to Firestore

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.

Reading Data from Firestore

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.

Updating Data in 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.

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.

Populating Widgets from Firestore

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.

Reading Data from Multiple 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.

Introduction to Firebase Storage

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.

Combining Firestore and Firebase Storage

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.

Accessing Files Through Flutter

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.

Uploading Files to Firebase Storage

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.

Would love your thoughts, please comment.x