A Beginner's Guide to Firebase and Firebase Extensions as a Flutter Developer

Firebase, developed by Google, is a cloud-based platform that offers a wide range of tools and services to help developers build, improve, and scale their applications effortlessly. It provides solutions for various aspects of app development, including authentication, real-time databases, cloud storage, hosting, and much more.

Within the Firebase ecosystem, you'll also find Firebase Extensions, a collection of pre-built solutions that integrate seamlessly with Firebase services, enabling you to add extra functionality to your applications without requiring extensive coding or complex configurations. These extensions can save you valuable time and effort by automating common tasks and seamlessly integrating popular third-party services.

This article provides guides on how to set up Firebase in your Flutter application and how to build your own Flutter extensions.

What is Firebase?

Firebase is Google's mobile platform that helps you quickly develop high-quality apps and grow your business. Firebase provides detailed documentation and cross-platform SDKs to help you build and ship apps on Android, iOS, the web, C++, and Unity.

Prerequisites

To follow along with this article, you’d need to have the following:

Flutter, Dart SDK and Dart extensions
VScode or your preferred IDE installed
A device connected to your computer or an emulator setup. If you want to connect your physical device, check out this article for steps
You’ve signed into Firebase with your Google account

How to set up Firebase in your Flutter application

Follow the steps below to set up Firebase in your Flutter application

Step 1: Create a Flutter application

Using the command prompt on your machine, enter the following command and press enter.

flutter create firebase_practice

Creating a new Flutter project

The application has been created; you can now open it with your preferred editor or continue using the command prompt. I will be using the command prompt in this article.

Step 2: Install the required command-line tools

To install Firebase CLI, you need to set up Firebase for this project using this Firebase doc or this article. After setting up the Firebase project, you need to set up the Firebase CLI for the application. In this tutorial, I am using a Windows operating system, so everything I will be doing is on the Windows OS.

Firstly, use the following command to enter the application you have created: cd firebase_practice Once you have your application as the entry point on your command prompt terminal, run this line of command: npm install -g firebase-tools, npm stands for node package manager, and it is one of the easiest ways to install the Firebase CLI tool in your application. You need to have the node package manager installed on your computer before you can run that command. Check out this node website for instructions if you don’t have it installed.

Firebase CLI successfully installed

Now that you have installed the CLI, you need to log in to Firebase by running this command: firebase login and you will have this result if the login is successful.

You can also check if you can view the Firebase projects available on your Firebase account to be sure that you have the project you created earlier by using this command:firebase projects: list

After checking the list you got, you need to activate your cli using the command:dart pub global activate flutterfire_cli

You need to configure your Flutter apps to use Firebase using this command:flutterfire configure. The configure workflow helps you select the different platforms you want for your application (web, Android, and iOS). It also creates the Firebase app in the Firebase project. After running the command, the result is

You will need to use the arrow buttons on your keyboard to select the Firebase project. In this case, if you are using Firebase Practice, press enter.

You will use the arrow to select the platforms you will be working with. You can click the enter button because it’s perfectly fine to have all platforms in our Firebase project.

Step 3: Initialize Firebase in your app

You need to run this command below to install the firebase_core plugin: flutter pub add firebase_core. Once the plugin is installed, check the configuration using the following command:flutterfire configure. After checking the configuration, you need to open your project in your preferred editor. I will be using VSCode from my command prompt. I will enter this command to open the project in VSCode: code .

This command will open the project in VSCode, check it out below 👇

Now, you need to import thefirebase_core plugin and the configuration file that was generated in lib/main.dart using the following:import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart';

You should also initialize Firebase using the DefaultFirebaseOptions object exported by the configuration file in your lib/main.dart file
await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); At this stage, you have done all the necessary setup. You should build your Flutter application to see if there will be any errors using the following command:flutter run

Step 4: Add Firebase plugins

This step is based on your needs. It depends on what you need for the application you want to build, which will determine the plugins you will be addingpubspec.yaml. It could be authentication, analytics, and so on.

What are Firebase extensions?

Firebase Extensions are pre-packaged solutions that provide additional functionality and integrations for your Firebase projects. They are designed to simplify common development tasks, reduce the need for custom code, and enable you to enhance your app's capabilities without extensive configuration or coding knowledge.

Popular extensions and their use cases

There are a lot of extensions built by individuals and companies to ensure that developers build applications seamlessly by integrating extensions that help them build faster and more seamlessly. Some examples can be used in your Flutter applications. Here are some examples below:

Trigger Email from Firestore: It composes and sends an email based on the contents of a document written to a specified Cloud Firestore collection.
Send Messages with Twilio: This extension was built by Twilio. It is used for sending a message using the Twilio API using custom events or based on the contents of a document written to a specified Cloud Firestore collection.
Firebase Stripe Extension: It controls access to paid content by syncing your one-time and recurring payments with Firebase Authentication.
Elastic App Search Firebase Extension: It allows you to sync documents from a Firestore collection to Elastic App Search to enable full-text search.

There are many examples, and you can find them in this extension website. You can search for extensions based on the use case you are looking for, and you will find them.

Building your own Firebase extensions

Building your own Firebase extensions can be both intriguing and fun at the same time. Here are some key points to note if you want to build your Firebase extensions.

You need to know how APIs work

You need to understand how cloud functions work in Firebase
You need to upgrade your Firebase to the Blaze plan using a verified card
You can use an extension or extensions to build your extensions, depending on your use-case

Conclusion

By integrating Firebase into your Flutter applications and leveraging the power of Firebase Extensions, you're not just building apps but crafting experiences.

With Firebase, you have the tools to implement secure user authentication, create real-time interactive features, store and retrieve data effortlessly, and host your app with confidence. But Firebase Extensions takes it further by offering pre-built solutions that simplify complex tasks and seamlessly integrate popular services into your app.

Imagine easily adding authentication options like Google or Facebook login, optimizing images on the fly for faster loading, sending transactional emails without a hassle, or empowering your app with advanced search capabilities – all with just a few clicks. Firebase Extensions unlock a world of possibilities, saving you time, effort, and the need for extensive coding.

If you have any questions, do reach out via my social media accounts. I would love to connect with you on Twitter | LinkedIn

References

Here are some lists of links where I got information. You can also use this link to learn better and build your extensions