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

Firebase category image

Introduction

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!

Flutter โค๏ธ Firebase

Get started with Firebase and learn how to use it in your Flutter apps. My detailed ebook delivers you everything you need to know! Flutter and Firebase are a perfect match!

Create a new Firebase account

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
Firebase welcome screen by author

And thatโ€™s it! Now, you need to create your first project.

Create a new project

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

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

1. Install Flutter SDK and create a Flutter project

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.

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

Canโ€™t find your project id? Look in the project settings ?

Firebase project settings screenshot by author
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
Add Flutter app to Firebase screenshot by author

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

Thatโ€™s the whole magic. You can now start developing your app withย available Firebase pluginsย โญ

Upgrade your billing plan

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
Upgrade link screenshot by author
  • Click onย Select Planย in theย Blazeย column
Plan selection screenshot by author
Plan selection screenshot by author
  • Set an optional billing alert if you want and continue
Billing alert setup screenshot by author
Billing alert setup screenshot by author
  • Finally, click onย Purchaseย to complete the process
Purchase confirmation screenshot by author
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

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

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

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

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!


Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!

Flutter โค๏ธ Firebase

Get started with Firebase and learn how to use it in your Flutter apps. My detailed ebook delivers you everything you need to know! Flutter and Firebase are a perfect match!

Become A Testing Expert!

Become a proficient Flutter app tester with my detailed guide. This ebook covers everything from unit tests over widget tests up to dependency mocking.