How To Create A Firebase Project And Link It With Your Flutter App

Introduction Link to heading

Firebase is the perfect choice to add cloud capabilities to your apps. Here is how to create a Firebase project and link it with your Flutter app. Start your Firebase journey with this guide!

Firebase is a lightweight app development platform of Google offering various services like databases, authentication, messaging, and many more. It offers SDKs for different programming languages and is well-documented. In this article, you’ll learn how to create a Firebase project and link it with your Flutter app.

This article covers the following sub-topics:

Create a new Firebase account
Create a new Firebase project
Create a new Firebase app
Upgrade your billing plan
Check your usage data
Manage users and permissions
Create a new budget

In case you want to know everything about Firebase and Flutter apps, check out my ebook!

Create a new Firebase account Link to heading

Setting up an account is pretty easy. Just go to console.firebase.google.com, click on Get Started, and log in with your existing Google account. Otherwise, you need to create a new one.

Firebase welcome screen by author

And that’s it! Now, you need to create your first project.

Create a new project Link to heading

Creating a project is done within a minute. Just follow these steps and have a look at the explaining images.

1. Click on Add project in your Firebase dashboard on console.firebase.google.com

Screenshot while adding a new firebase project by author

2. Choose a name for your project

Screenshot while choosing a Firebase project name by author

3. You will be asked to enable Google Analytics but you can also disable it if you want

The final screen of the Firebase project creation process by author

4. A click on Create project finishes the process.

Your new project will appear in the dashboard and is ready for use!

Connect your Flutter app with Firebase Link to heading

To access Firebase from your Flutter app, you need to do some setup steps.

1. Install Flutter SDK and create a Flutter project

Create a new Flutter project in three different ways Link to heading

This short article shows how to create a new Flutter project, so you can start working on your app.

2. Install Firebase CLI tools

3. Log into your Firebase account with the firebase login command

4. Install the FlutterFire CLI with any command-line tool from any location dart pub global activate flutterfire_cli

5. Navigate to your Flutter project root folder and run the command flutterfire configure --project=<project-id> or just flutterfire configure
A file firebase_options.dart will be created in your lib folder. However, it will produce build errors. This file contains all the required information to work with Firebase. If you change your Firebase configuration (by adding a web app for example), you need to run the configuration command again.

6. Add the Firebase core plugin flutter pub add firebase_core The build errors should have been fixed.

7. Initialize Firebase from your main method.

DartFuture main() async { await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); runApp(App()); }

Future main() async {
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(App());
}

How to install packages in your Flutter app Link to heading

This short article shows how to add packages to a Flutter application so that you can use existing code and you don’t have to write everything yourself.

Can’t find your project id? Look in the project settings ?

Firebase project settings screenshot by author

Or use the command firebase projects:list in your command-line tool.

You can also use a wizard in Firebase that provides the same setup instructions. Just click on the Flutter icon when you are on your Firebase project overview dashboard.

Add Flutter app to Firebase screenshot by author

Here is another guide on how to connect Firebase with your Flutter app.

Add Firebase to your Flutter app Link to heading

Install your preferred editor or IDE.

That’s the whole magic. You can now start developing your app with available Firebase plugins ⭐

Upgrade your billing plan Link to heading

After learning how to create a Firebase project and link it with your Flutter app, we can now look at billing. By default, your account uses the Spark plan which has free usage quotas for some of the Firebase features. To enable the full potential, you need to switch to the Blaze plan. With that plan, you will be charged for usage after the free limit is reached. There are no regular base fees to pay. To compare the details of the plans, see this link.

💡 Tip

If you don’t host any web services, occupy any database storage, or use any functions of Firebase, you won’t be charged anything. There is no monthly fee.

❗

Warning

You will need to set up a billing account that requires a credit card when changing to the Blaze plan.

Follow these steps to switch your plan:

On your Firebase project dashboard, click on Upgrade in the lower-left corner

Upgrade link screenshot by author

Click on Select Plan in the Blaze column

Plan selection screenshot by author

Set an optional billing alert if you want and continue

Billing alert setup screenshot by author

Finally, click on Purchase to complete the process

Purchase confirmation screenshot by author

Your plan is upgraded now. You can use additional Firebase features like Machine Learning, Test Lab, or Functions.

Check your usage data Link to heading

If you are going to build an app with lots of users, you need to get familiar with the usage and billing dashboard. As the Google services scale up when the load is high, your costs could be unexpectedly high. The Firebase usage and billing dashboard calculates costs per day and is a good way to keep an eye on the money.

On your Firebase project dashboard, click on the gears and select Usage and billing from the list

Firebase usage and billing link screenshot by author

You will see an overview of your running costs that will be charged at the beginning of the next month

Firebase usage and billing overview screenshot by author

It is that simple to keep track of your current costs with Firebase ?

Manage users and permissions Link to heading

To manage users and permissions, Firebase offers another dashboard in the project settings to add or remove members and assign roles to them.

On your Firebase project dashboard, click on the gears and select Users and permissions from the list

Firebase users and permissions link screenshot by author

Show Firebase users and permissions link screenshot by author

Use the dashboard to manage members and roles. For advanced settings, there is a link to the Google Cloud Console in the lower-right corner.

Firebase users and permissions dashboard screenshot by author

List Firebase users and permissions dashboard screenshot by author

To invite a new member, click the Add member button, and insert the mail address and the desired role.

Firebase makes user management pretty easy in my opinion.

Create a new budget alert Link to heading

Budget alerts are great when you don’t want to exceed a certain amount of money every month, but you also don’t want to track your costs every day. A budget alert will notify you in case an event happens (for example 90% of your budget is reached). That way you don’t have to worry about costs.

To set up one or more budget alerts, go to the usage and billing dashboard (see section Check your usage data) and switch to the tab Details & settings.

Firebase details and settings dashboard screenshot by author

Use the button Create first budget (or View budgets if you already have at least one) to manage your budgets. You’ll be redirected to the Google Cloud Console, but the wizard is easy to understand.

Conclusion Link to heading

In this article, I showed you how to create a Firebase project and link it with your Flutter app. You can now use all the powerful Firebase services to build your apps!

How To Easily Use Firebase Storage From Your Flutter App Link to heading

In this article, I’ll show you how to easily use Firebase Storage from your Flutter app to read and write data. Make your app cloud-ready with this guide!

How To Use Firebase Cloud Firestore With A Flutter App Link to heading

In this article, I guide you through the setup steps for Cloud Firestore and show you how to use Firebase Cloud Firestore with a Flutter app. We take a look at CRUD operations, security rules, and some pitfalls to avoid.

How To Monitor Your Mobile Apps With Firebase Crashlytics Link to heading

Learn why your apps crash and why you get complaints from users. Here is how to monitor your mobile apps with Firebase Crashlytics. Get crash trends, grouped issues, exception types and messages, source code location, stack traces, device types, and much more!