Firebase Flutter Setup Guide
Uploaded by
barehadahomedFirebase Flutter Setup Guide
Uploaded by
barehadahomedFirebase 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
(https://console.firebase.google.com/)
- Android/iOS platforms added in your Firebase project
Step 1: Install Node.js
-----------------------
- Download from: https://nodejs.org
- 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 pubspec.yaml, add:
dependencies:
firebase_core: ^2.0.0 # (Check pub.dev for latest)
Then run:
flutter pub get
Step 6: Initialize Firebase in main.dart
----------------------------------------
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
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:
- Firebase.initializeApp() is taking too long or silently failing
- You didn’t await it properly before runApp