How to Use Firebase with Flutter: Simple 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 firebase_core package. Then initialize Firebase in your app's main function before using other Firebase services like authentication or database.

Syntax

Here is the basic syntax to initialize Firebase in a Flutter app:

• import 'package:firebase_core/firebase_core.dart'; - Import the Firebase core package.
• await Firebase.initializeApp(); - Initialize Firebase asynchronously before running the app.
• runApp(MyApp()); - Start your Flutter app after 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')),
      ),
    );
  }
}

Output

A Flutter app with an app bar titled 'Firebase with Flutter' and centered text 'Firebase Initialized'.

Example

This example shows how to set up Firebase in Flutter and display a simple message confirming initialization.

It demonstrates importing the package, initializing Firebase, and running a basic app UI.

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')),
      ),
    );
  }
}

Output

A Flutter app with an app bar titled 'Firebase with Flutter' and centered text 'Firebase Initialized'.

Common Pitfalls

Common mistakes when using Firebase with Flutter include:

• Not calling WidgetsFlutterBinding.ensureInitialized() before Firebase.initializeApp(), which causes 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.
• Trying to use Firebase services before initialization completes.

dart

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

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

Quick Reference

Tips for using Firebase with Flutter:

• Always initialize Firebase before running the app.
• Add platform-specific config files to your project.
• Use firebase_core package as the base for all Firebase services.
• Check Firebase documentation for each service setup (Auth, Firestore, etc.).

Key Takeaways

Initialize Firebase with WidgetsFlutterBinding.ensureInitialized() before Firebase.initializeApp().

Add Firebase config files to Android and iOS projects for proper setup.

Use the firebase_core package as the foundation for Firebase in Flutter.

Avoid using Firebase services before initialization completes.

Refer to Firebase docs for service-specific setup after core initialization.