Flutter Part 2

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.

Flutter for Designers Part 2

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

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

Build a cross platform app for iOS and Android

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

About this Course

Continuing on from the previous Flutter for Designers course, 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.
2

Requirements

This course is a continuation of Flutter for Designers Part 1. Therefore, please make sure you have taken the previous course in order to continue on with this course.
In this course, I am running macOS Big Sur, Xcode 12.4, and Android Studio 4.1.2. We'll be using Android Studio to develop our Flutter application. If you do not have the Flutter or Dart SDK installed on your system, check out this section from the previous course. For the most of this course, I was using Flutter 1.22. If you are using Flutter 2.0, read the section below.

A Note About Flutter 2.0

Halfway through the development of this course, Flutter announced Flutter 2.0, the biggest upgrade to Flutter since Flutter. The notable new features about Flutter 2.0 is that apart from iOS and Android, Flutter applications can now be built for the Web, macOS, Linux, and Windows. Furthermore, Flutter 2.0 includes some new tools, engine changes, and introduces null safety into Dart (a technique to help avoid bugs cause by not defining a variable). If you want more information on what's new, this Medium post by the Flutter creators is a worthy read.
The best part about this upgrade is that it works with all of the code we have written so far. Therefore, whether you are running Flutter 1.0 or 2.0, the above course should still be able to run completely fine. The only notable change you may notice is that you may need to upgrade the packages inside your pubspec.yaml file upon installation, but the code will remain the same nevertheless.
3

Source Code


Click to import assets, drag and drop the folders inside the Assets folder. 

Complete Book for the course

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

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.