Firebase Project Setup & Flutter Integration

Firebase Project Setup & Flutter Integration

Firebase is Google's mobile and web application development platform that provides a suite of backend services — authentication, real-time databases, cloud storage, analytics, and more — without requiring you to manage server infrastructure. In this lesson you will learn how to create a Firebase project, register your Android and iOS apps, configure the required credential files, and initialise Firebase in a Flutter project using the FlutterFire CLI and the firebase_core package.

Step 1: Create a Firebase Project

Every Firebase-powered app starts with a Firebase project that acts as a shared container for your services and apps.

• Open the Firebase Console at console.firebase.google.com and sign in with a Google account.
• Click Add project, enter a project name (e.g. my_flutter_app), and choose whether to enable Google Analytics.
• Wait for provisioning to complete, then click Continue to land on the project dashboard.

Step 2: Register Your Android App

To connect your Flutter Android build to Firebase you must register the Android app and download a configuration file.

• In the project dashboard click the Android icon (</>) to start the setup wizard.
• Enter your Android package name exactly as it appears in android/app/build.gradle under applicationId (e.g. com.example.myflutterapp).
• Optionally enter an app nickname and your debug signing certificate SHA-1 (required for Google Sign-In and Dynamic Links).
• Click Register app, then download google-services.json and place it in the android/app/ directory.

Step 3: Register Your iOS App

iOS registration follows the same wizard but requires a Bundle ID instead of a package name.

• Click Add app → iOS in the project dashboard.
• Enter the iOS Bundle ID from ios/Runner.xcodeproj/project.pbxproj (e.g. com.example.myFlutterApp).
• Download GoogleService-Info.plist and drag it into the ios/Runner/ directory inside Xcode — not just the file-system folder — so Xcode includes it in the build target.

Step 4: Install the FlutterFire CLI

The FlutterFire CLI automates the tedious parts of Firebase setup: it reads your Firebase project, detects registered apps, and generates a firebase_options.dart file that firebase_core consumes at runtime.

# Install the Firebase CLI first (required by FlutterFire CLI)
npm install -g firebase-tools

# Log in to Firebase
firebase login

# Install the FlutterFire CLI as a Dart global tool
dart pub global activate flutterfire_cli

# Run the configuration command from your Flutter project root
flutterfire configure --project=my-flutter-app

The flutterfire configure command will prompt you to select the platforms you want to support. It then generates lib/firebase_options.dart containing a DefaultFirebaseOptions class with all the platform-specific credentials bundled in one place.

Step 5: Add firebase_core and Initialise Firebase

Open pubspec.yaml and add the firebase_core dependency, then run flutter pub get.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^3.6.0   # use the latest stable version

Then initialise Firebase in main.dart before runApp(). Because Firebase.initializeApp() is asynchronous you must make main an async function and call WidgetsFlutterBinding.ensureInitialized() first.

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

Future<void> main() async {
  // Must be called before any async work in main()
  WidgetsFlutterBinding.ensureInitialized();

  // Initialise Firebase using the generated options
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Firebase Ready')),
        body: const Center(
          child: Text('Firebase is initialised!'),
        ),
      ),
    );
  }
}

Verifying the Setup

Run flutter run (with a device or emulator connected). If you see the Firebase Ready app bar and no red errors in the console, Firebase is connected. You can also open the Firebase Console, navigate to Project Overview, and confirm that the last-active timestamps update when you launch the app.

Summary

In this lesson you learned to:

• Create a Firebase project in the Firebase Console.
• Register Android and iOS apps and download their credential files (google-services.json / GoogleService-Info.plist).
• Use the FlutterFire CLI to auto-generate firebase_options.dart.
• Add firebase_core to pubspec.yaml and call Firebase.initializeApp() in main().

With Firebase initialised, you are ready to integrate any Firebase service — Firestore, Authentication, Storage, and more — into your Flutter app.