Firebase - Per App Configuration

1. Objectives
2. Prerequisites
3. Boilerplate
4. Configure an app to use Firebase
   1. Create a new project using the Firebase Console
5. Initialize Firebase in the app
6. Final Reminder

Objectives

• To configure Firebase for use in an app

Prerequisites

You must complete the Firebase Tool Installation on your machine before this step. The Firebase tools only need to be installed and configured once per computer you use.

Boilerplate

Create a new project called flutter_firebase_example and paste the following into main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(title: "Firebase Example", home: HomeScreen()));
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Configure an app to use Firebase

Apps must be individually configured to use Firebase. That means that each app you create (say, the example app and your term project), you must go through these steps.

Create a new project using the Firebase Console

1. Go to https://console.firebase.google.com and select the option to Create a New Project
2. Give your project a name and accept all the Terms if needed. Note the name you chose.
3. Use the default project settings.
4. Firebase will show a loading screen when you are finished. The project will take a few seconds to create. ##
5. Using the VSCode Terminal, run the command flutterfire configure.
   • Note: You can also use your system Terminal/Command Prompt, but you will need to cd into the project directory before running any commands.
   • Mac troubleshooting: IF you encounter an exception with “in ‘require’: cannot load such file – xcodeproj (LoadError)”, run the command sudo gem install xcodeproj from the command line. Enter your login password when prompted.
6. If at any point you mess up, hit Control+C to cancel.
7. Use the arrow keys to select the name of hte project you just created; the greater-than sign indicates your current selection.
8. Hit Enter at the next prompt to accept the default platforms to support.
9. It will take a while to process. When it is finished, you will see something like the following:

    Firebase configuration file lib/firebase_options.dart generated successfully with the following Firebase apps:
   
    Platform  Firebase App Id
    web       1:217651222249:web:ec62325ac557c30af5c278
    android   1:217651222249:android:798c3ae32d2ef648f5c278
    ios       1:217651222249:ios:3aa01e44fdb04f04f5c278
    macos     1:217651222249:ios:3aa01e44fdb04f04f5c278
   
    Learn more about using this file and next steps from the documentation:
    > https://firebase.google.com/docs/flutter/setup
   

These steps created a new Firebase project in the cloud for your app to use, and then configured your source code to talk to the cloud. You may have noticed a file named firebase_options.dart now appears in your project’s lib/ directory. Do not edit this file directly. It has been generated by the Firebase CLI and tells your app how to talk to your project in the Firebase cloud. The Firebase CLI has also made tweaks in your android/, ios/, macos/, windows/ and web/ folders (if you have them).

Go back to your web browser at https://console.firebase.google.com and select the project you created. You will see a dashboard with a lot of content. At the top of the dashboard you should see several “apps” – these are your Flutter app, one for each platform in your project (android, ios, macos, web, windows).

Remember, the way Flutter’s cross-platform framework works is that you write Dart code, but Flutter transforms your Dart code into native code that is unique to each platform. From the Firebase cloud’s perspective, these are separate applications that may be trying to talk to it. So, each separate platform app has been added to the Firebase project to give them permission to use your Firebase project.

Okay, so now our Firebase cloud project and our Flutter project have the necessary configuration to communicate with one another.

Initialize Firebase in the app

Next, we need to add Firebase libraries to our Flutter project that will let us write Dart code to communicate with our Firebase project in the cloud.

1. In the VSCode Terminal, run flutter pub add firebase_core. This adds firebase dependencies to your pubspec.yml file.
2. In the VSCode Command Palette, run “Pub: Get Packages” in the VS Code Command Palettte or run ‘flutter pub get’ in the Terminal to ensure the Firebase libraries download.
3. Run flutterfire configure again. Select the project you created earlier, e.g., firebase-example-1872635, then hit Enter to select the default app types. The process will run and generate some files. These files tell your app how to talk to Firebase.
4. In main.dart, add the following imports to the top:

    import 'package:firebase_core/firebase_core.dart';
    import 'firebase_options.dart';
   

5. In main.dart, change the main() function to the following:

    void main() async {
      runApp(const MaterialApp(title: "Firebase Example", home: HomeScreen()));
      await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform,
      );
    }
   

The extra code in main() essentially tells your app to read that firebase_options.dart file so that the Firebase Dart libraries know how to communicate with your Firebase project.

Our app is now ready and able to talk to Firebase. We are now ready to add individual Firebase capabilities to the app. We will start with Firebase Authentication.

Final Reminder

You need to do this setup for each app in which you use Firebase.