Beginning FlutterFire

Now that your Firebase project is ready, download the starter project by clicking the Download Materials button of this tutorial. Open the project in the latest version of Visual Studio Code. Make sure you run the latest version of the Flutter and Dart plugins. At this time this is just an empty project, with the name already set up and an empty Container instead of the default app that Flutter creates when you build a new project.

Open the pubspec.yaml file and click the “Pub get” button at the top right corner to download the required dependencies.

OK, now that both your Flutter and Firebase projects are ready, you need to connect them. Until recently, this would require a lot of work, but now you have a tool that simplifies the process: it’s the FlutterFire CLI. It’s a tool that you use from your terminal, to install and configure Firebase in your Flutter apps.

So, the first step is installing the CLI. This requires the node package manager. This is a command line tool that installs, updates or uninstalls Node packages in your application.

So, if you don’t have it already installed, get to the https://nodejs.org/ web site with your browser and install the version that suits your operating system. Personally, I recommend the LTS version of node, as it’s proved more stable and less bug prone over time. During the installation you can just accept the default configuration. Once node.js is installed in your system, open your Terminal, or command prompt, and type:

npm install -g firebase-tools 

This uses npm, or Node Package Manager, to install globally (that’s the minus g option) the Firebase CLI, so that you can reach it from any directory in your Terminal. Now Next, run the command:

dart pub global activate flutterfire_cli 

This command activates the FlutterFire CLI: this means that from now on, you can run scripts from the flutterfire’s bin directory even when you are outside that folder. Note that you only need to install the flutterfire CLI once. Now add the firebase core dependency to our project:

flutter pub add firebase_core 

This is a flutterfire plugin that you always need to add to every Flutter project that uses Firebase.

Open the pubspec.yaml file: note that now the firebase core dependency has been added to the app. Let’s make sure we are logged in:

firebase login 

If you are not already logged in to Firebase, this will open a browser window asking your credentials. Insert them, then give flutter_cli the required permissions. If everything works as expected, you’ll make your browser happy with this success message.

Now let’s finally use our newly installed flutterfire cli tool to configure our app. Run the command:

flutterfire configure 

Select the track-app Firebase project and press enter. Next you need to select the platforms where you want to release your app. In this case let’s just leave android and iOS if you are on a Mac, otherwise just leave Android. And that’s it: your app is now configured to use FlutterFire!

Now to make sure everything is working, let’s also run the app: if you just see a blank screen like this one, it means you have correctly configured your app and connected it to your Firebase project!

Now comes the fun part! Let’s add authentication to our app in the next few lessons!