How to Set Up Firebase Using FlutterFire CLI (2024 Updated)

Setting up Firebase in a Flutter project has never been easier, thanks to the FlutterFire CLI. In this guide, we will take you through the step-by-step process of integrating Firebase into your Flutter application using the latest tools in 2024. Whether you are a beginner or an experienced developer, this tutorial will help you set up Firebase seamlessly.

What You'll Learn

1. Creating a Firebase Project – Setting up a new Firebase project in the Firebase Console.
2. Installing Node.js and npm – Ensuring Node.js and npm are installed on your system.
3. Installing Firebase CLI – Using npm to install Firebase CLI globally.
4. Activating FlutterFire CLI – Making FlutterFire CLI available globally.
5. Logging into Firebase – Authenticating with Firebase via the CLI.
6. Configuring FlutterFire – Linking your Flutter project with Firebase using FlutterFire CLI.
7. Installing Firebase Core – Adding Firebase dependencies to your Flutter project.
8. Updating main.dart – Including necessary configurations in your main.dart file.
9. Running Your App – Ensuring Firebase is properly set up in your app.

---

1. Creating a Firebase Project

To start, follow these steps:

• Visit Firebase Console.
• Click on Create a Project and follow the on-screen instructions.
• Once created, add an Android and/or iOS app to the Firebase project.

2. Installing Node.js and npm

Ensure you have Node.js and npm installed. Check the versions using:

node -v
npm -v

If not installed, download and install Node.js from nodejs.org.

3. Installing Firebase CLI

Use npm to install Firebase CLI globally:

npm install -g firebase-tools

Check if the installation was successful:

firebase --version

4. Activating FlutterFire CLI

Activate FlutterFire CLI to link Firebase with Flutter:

dart pub global activate flutterfire_cli

5. Logging into Firebase

Authenticate Firebase CLI with your Google account:

firebase login

This opens a browser window for authentication.

6. Configuring FlutterFire

Navigate to your Flutter project’s root directory and run:

flutterfire configure

This will:

• Detect your Firebase project.
• Generate firebase_options.dart automatically.
• Set up Firebase for your platforms.

7. Installing Firebase Core

Add Firebase dependencies to pubspec.yaml:

dependencies:
  firebase_core: latest_version

Then, run:

flutter pub get

8. Updating main.dart

Modify your main.dart file to initialize Firebase:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

9. Running Your App

Finally, run your Flutter app:

flutter run

If everything is set up correctly, Firebase will be successfully integrated into your Flutter project!

---

Conclusion

With the FlutterFire CLI, setting up Firebase in Flutter is now faster and more efficient. By following these steps, you can easily integrate Firebase services into your app.

Social Media & Community

Join our Facebook community: Takneeki Code

Feel free to leave any questions or suggestions in the comments section below. Happy coding! 🚀