How to Use Firebase with Flutter: Setup and Example

To use Firebase with Flutter, first add Firebase to your Flutter project by configuring it in the Firebase Console and adding the necessary FlutterFire packages. Then initialize Firebase in your app's main function using Firebase.initializeApp() before using any Firebase services.

Syntax

To use Firebase in Flutter, you need to import the Firebase core package and initialize Firebase in your app. The main parts are:

• import 'package:firebase_core/firebase_core.dart'; - imports Firebase core functions.
• await Firebase.initializeApp(); - initializes Firebase before using its services.
• Use other Firebase packages like firebase_auth or cloud_firestore after initialization.

dart

import 'package:flutter/widgets.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Example

This example shows a minimal Flutter app that initializes Firebase and displays a simple text confirming initialization.

dart

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Firebase with Flutter')),
        body: Center(child: Text('Firebase Initialized Successfully!')),
      ),
    );
  }
}

Output

A Flutter app screen with an app bar titled 'Firebase with Flutter' and centered text 'Firebase Initialized Successfully!'

Common Pitfalls

Common mistakes when using Firebase with Flutter include:

• Not calling WidgetsFlutterBinding.ensureInitialized() before Firebase.initializeApp(), causing initialization errors.
• Forgetting to add Firebase configuration files (google-services.json for Android, GoogleService-Info.plist for iOS) to the project.
• Not adding required Firebase packages in pubspec.yaml or not running flutter pub get.
• Trying to use Firebase services before initialization completes.

dart

/// Wrong way: Missing ensureInitialized
void main() async {
  await Firebase.initializeApp(); // This can cause errors
  runApp(MyApp());
}

/// Right way:
import 'package:flutter/widgets.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Quick Reference

Tips for using Firebase with Flutter:

• Always initialize Firebase before using any Firebase services.
• Add platform-specific config files to Android and iOS folders.
• Use FlutterFire CLI to simplify setup (flutterfire configure).
• Keep Firebase packages updated for best compatibility.

Key Takeaways

Initialize Firebase in main() using WidgetsFlutterBinding.ensureInitialized() and Firebase.initializeApp().

Add platform config files (google-services.json and GoogleService-Info.plist) to your project.

Use FlutterFire packages for Firebase services and run flutter pub get after adding them.

Avoid using Firebase services before initialization completes to prevent runtime errors.

Use FlutterFire CLI tool to automate Firebase setup for Flutter projects.