[0:00]Hello, my name is Joe. I am a Google developer expert for Flutter and Dart. And this is episode one of Flutter and Firebase together. What we're going to do is we're going to build a todo application together using Flutter and Firebase. In episode one, we're going to talk about the project setup. We're going to talk about the Firebase console and the Firebase CLI. And we're going to learn about the flutter fire plugin. So let's dive into it. What we're going to build together is a todo application. And here is what it looks like. This is a web application that's running locally on my machine. And I'm going to reload the application right now. And it's going to connect to Firebase and get all the todos that I have. So I have a todo here that says, I have to record episode one. And I can add another todo here. I have to record episode two. And it adds it to the list.
[57:01]It adds it to Firebase.
[58:04]And I can actually go and say, I have to record episode one. I've done that.
[1:03:01]I can actually delete that.
[1:05:02]And the database is updated with that.
[1:07:07]So this is a simple todo application that just connects to Firebase and does a lot of the crud functionality.
[1:15:03]Create, read, update, delete functionality.
[1:18:08]The prerequisites for this course are basic knowledge of Flutter and Dart. You should have a Flutter installed on your machine.
[1:27:03]You should be familiar with the Firebase console.
[1:30:04]You should have a Google account. Of course, this is required for Firebase.
[1:34:03]And you should have a basic knowledge of the command line.
[1:37:02]We're going to use the command line to do some work.
[1:40:05]So the first thing we're going to do is we're going to create a Flutter project together.
[1:46:05]And I'm going to create a Flutter project with the name todo app.
[1:51:05]So I'm going to open up my VS Code, and I have a terminal open here.
[1:56:05]I'm going to issue the Flutter create command, and then I'm going to say todo app.
[2:02:04]And this will create a brand new Flutter project for us with that name.
[2:07:04]So as that's doing that, I'm going to open up a new tab.
[2:11:04]And what we're going to do next is we're going to go to the Firebase console.
[2:16:06]So I'm going to go to console.firebase.google.com.
[2:22:02]And that will open up the Firebase console.
[2:25:03]And what we're going to do is we're going to add a new project.
[2:28:07]And the name of the project is going to be the same name as our Flutter project, which is todo app.
[2:35:04]So I'm going to say todo app, and I'm going to click continue.
[2:39:04]It's asking us if we want to enable Google Analytics for this project.
[2:42:03]I'm going to disable it just for the sake of simplicity.
[2:46:02]And I'm going to click create project.
[2:49:04]And that will create the project for us in the Firebase console.
[2:53:07]So while that's being created, let's go back to VS Code. And we have the project created here.
[3:00:04]So I'm going to change directory into todo app.
[3:04:03]And then I'm going to open up the project in VS Code.
[3:07:02]And here we have the project.
[3:09:04]So if we go back to the browser, the project has been created.
[3:13:01]And I'm going to click continue.
[3:15:06]And we are now in the Firebase console for our new todo app project.
[3:22:04]So what's next is we need to install the Firebase CLI.
[3:26:03]And I have a new tab here opened where I'm going to do that.
[3:30:07]So it's NPM install -g firebase-tools.
[3:37:07]I already have the Firebase CLI installed, but if you don't have it, you can install it here.
[3:44:04]You will need Node.js installed on your machine for this to work.
[3:49:05]So next what we need to do is we need to install the Flutter Fire CLI.
[3:54:06]And this is a new CLI that's made by the Flutter team and the Firebase team together.
[4:01:06]And it makes it easier for us to set up Firebase in a Flutter project.
[4:07:08]So I'm going to install it by doing dart pub global activate flutterfire_cli.
[4:16:02]Again, I have it installed already.
[4:18:02]But if you don't, you can install it here.
[4:21:05]And this will enable us to configure Firebase for our Flutter project.
[4:27:10]So next, what we need to do is we need to go back to our project, our Flutter project, and we need to run FlutterFire configure.
[4:38:03]And that will configure Firebase for us.
[4:41:06]So it's detecting the current project, and it's asking us to choose a Firebase project.
[4:47:05]I'm going to choose todo app, which is the project we just created.
[4:52:05]And now it's asking us which platforms we want to enable for this project.
[4:57:04]I'm going to enable Android, iOS, and Web.
[5:02:01]And I'm going to hit enter.
[5:03:02]And it's doing its magic.
[5:06:04]And it's generating the Firebase options file for us.
[5:10:07]So if we open up the lib folder, we have a new file here called firebase_options.dart.
[5:17:07]And this contains all the different options for our Firebase project for the different platforms.
[5:24:05]So for Android, for iOS, for web, and for macOS.
[5:30:07]So next, what we need to do is we need to add the Firebase Core plugin to our project.
[5:37:07]So I'm going to go to pubspec.yaml and I'm going to add a dependency called Firebase Core.
[5:45:05]And then I'm going to save it, and that will run a flutter pub get for us.
[5:50:10]So now that we have the Firebase Core plugin installed in our project, what we need to do is we need to initialize Firebase.
[6:00:03]So I'm going to go to the main.dart file.
[6:03:10]And in the main function, the first thing we need to do is we need to say WidgetsFlutterBinding.ensureInitialized.
[6:13:07]This is important because we need to make sure that the Flutter engine is initialized before we do anything else.
[6:20:07]And then we're going to say await Firebase.initializeApp.
[6:27:04]And it will ask us to pass in the options for the Firebase app.
[6:32:01]So we're going to say options.
[6:34:06]And we're going to say DefaultFirebaseOptions.currentPlatform.
[6:41:04]So this is a new thing that's been added to the Firebase options file.
[6:46:06]It will automatically detect which platform it's running on, and it will pick the correct options for it.
[6:53:03]And then we need to mark this function as async.
[6:56:03]And we need to import Firebase Core.
[7:00:03]And we need to import the Firebase options file.
[7:04:05]And now we have Firebase initialized in our Flutter project.
[7:09:04]So if we run the application, it should run without any issues.
[7:13:02]So I'm going to run it on Chrome.
[7:15:02]And it's opening up the application.
[7:18:02]And it's building it right now.
[7:20:05]And we should see the default Flutter application running in our browser.
[7:26:03]So it's loading the application, and here it is.
[7:30:03]It's the default Flutter application. It's running correctly.
[7:33:02]And that's it for episode one.
[7:35:03]We've learned how to set up Firebase in a Flutter project.
[7:39:06]We've learned about the Firebase console, the Firebase CLI, and the Flutter Fire plugin.
[7:46:06]In the next episode, we're going to talk about Cloud Firestore and how to use it in our Flutter project.
[7:53:04]So thank you for watching. And I'll see you in the next episode.
