Firebase Integration with Flutter – Step-by-Step Guide
======================================================
Overview
--------
This document will guide you through the complete setup of Firebase in a Flutter
application, from installing dependencies to initializing Firebase in your app.
Prerequisites
-------------
- Flutter installed and working (`flutter doctor`)
- Dart SDK installed
- A Firebase project created in Firebase Console
([Link]
- Android/iOS platforms added in your Firebase project
Step 1: Install [Link]
-----------------------
- Download from: [Link]
- Install and verify:
node -v
npm -v
Step 2: Install Firebase & FlutterFire CLI
------------------------------------------
- npm install -g firebase-tools
- dart pub global activate flutterfire_cli
Note: Ensure Dart’s global bin path is added to your system’s environment
variables:
C:\Users\<YourUsername>\AppData\Local\Pub\Cache\bin
Step 3: Log in to Firebase
--------------------------
Navigate to your Flutter project directory:
cd path/to/your/flutter_project
Then run:
firebase login
If you see a script permission error in PowerShell, run this:
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
firebase login
Step 4: Configure Firebase in Flutter
-------------------------------------
flutterfire configure
- Select your Firebase project
- Select platforms (Android/iOS/Web)
- It generates a file: lib/firebase_options.dart
Step 5: Add Dependencies
------------------------
In your [Link], add:
dependencies:
firebase_core: ^2.0.0 # (Check [Link] for latest)
Then run:
flutter pub get
Step 6: Initialize Firebase in [Link]
----------------------------------------
import 'package:flutter/[Link]';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
void main() async {
[Link]();
await [Link](
options: [Link],
);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Firebase Setup',
home: Scaffold(
appBar: AppBar(title: Text('Firebase Connected')),
body: Center(child: Text('Hello Firebase')),
),
);
}
}
You're Done!
------------
You can now start integrating Firebase features like:
- firebase_auth
- cloud_firestore
- firebase_storage
- firebase_messaging
- etc.
Debug Tip
---------
If your app gets stuck and shows this repeatedly:
W/ViewTreeObserver: onPreDraw return false ...
It's usually because:
- [Link]() is taking too long or silently failing
- You didn’t await it properly before runApp
