# 🔥 Firebase + Flutter: Complete Integration Guide ## 👋 Introduction Firebase is the perfect backend for Flutter apps! It provides authentication, database, storage, analytics, and more - all with minimal setup. Let's build a complete Firebase-powered Flutter app. ## 🎯 What is Firebase? Firebase is Google's Backend-as-a-Service (BaaS) that provides: - 🔐 **Authentication**: Email, Google, phone, and more - 💾 **Firestore**: NoSQL cloud database - 📦 **Storage**: File and image storage - 📊 **Analytics**: Track user behavior - 💬 **Cloud Messaging**: Push notifications - ⚡ **Cloud Functions**: Serverless backend logic - 🏠 **Hosting**: Deploy web apps ## 🚀 Setup Firebase Project ### Step 1: Create Firebase Project 🆕 1. Go to [Firebase Console](https://console.firebase.google.com) 2. Click **Add Project** 3. Enter project name: `my-flutter-app` 4. Enable Google Analytics (optional) 5. Click **Create Project** ### Step 2: Add Flutter App 📱 **For Android:** ```bash # Download google-services.json # Place in: android/app/google-services.json ``` **For iOS:** ```bash # Download GoogleService-Info.plist # Place in: ios/Runner/GoogleService-Info.plist ``` ### Step 3: Install FlutterFire CLI ⚙️ ```bash # Install Firebase CLI npm install -g firebase-tools # Install FlutterFire CLI dart pub global activate flutterfire_cli # Configure Firebase flutterfire configure ``` ### Step 4: Add Dependencies 📦 Add to `pubspec.yaml`: ```yaml dependencies: flutter: sdk: flutter # Firebase Core (Required) firebase_core: ^2.24.0 # Firebase Services firebase_auth: ^4.15.0 cloud_firestore: ^4.13.0 firebase_storage: ^11.5.0 firebase_analytics: ^10.7.0 firebase_messaging: ^14.7.0 ``` Then run: ```bash flutter pub get ``` ### Step 5: Initialize Firebase 🔧 Update `lib/main.dart`: ```dart import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); // Initialize Firebase await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Firebase Flutter App', home: HomePage(), ); } } ``` ## 🔐 Firebase Authentication ### Email/Password Authentication 📧 ```dart import 'package:firebase_auth/firebase_auth.dart'; class AuthService { final FirebaseAuth _auth = FirebaseAuth.instance; // Get current user User? get currentUser => _auth.currentUser; // Auth state changes Stream get authStateChanges => _auth.authStateChanges(); // Sign up with email and password Future signUp({ required String email, required String password, }) async { try { return await _auth.createUserWithEmailAndPassword( email: email, password: password, ); } on FirebaseAuthException catch (e) { if (e.code == 'weak-password') { print('The password is too weak.'); } else if (e.code == 'email-already-in-use') { print('Account already exists.'); } return null; } } // Sign in with email and password Future signIn({ required String email, required String password, }) async { try { return await _auth.signInWithEmailAndPassword( email: email, password: password, ); } on FirebaseAuthException catch (e) { if (e.code == 'user-not-found') { print('No user found.'); } else if (e.code == 'wrong-password') { print('Wrong password.'); } return null; } } // Sign out Future signOut() async { await _auth.signOut(); } // Reset password Future resetPassword(String email) async { await _auth.sendPasswordResetEmail(email: email); } } ``` ### Google Sign In 🔵 Add dependency: ```yaml google_sign_in: ^6.1.0 ``` ```dart import 'package:google_sign_in/google_sign_in.dart'; Future signInWithGoogle() async { try { // Trigger the authentication flow final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn(); if (googleUser == null) return null; // Obtain the auth details final GoogleSignInAuthentication googleAuth = await googleUser.authentication; // Create a new credential final credential = GoogleAuthProvider.credential( accessToken: googleAuth.accessToken, idToken: googleAuth.idToken, ); // Sign in to Firebase return await FirebaseAuth.instance.signInWithCredential(credential); } catch (e) { print('Error: $e'); return null; } } ``` ## 💾 Cloud Firestore ### Create/Read/Update/Delete (CRUD) 📝 ```dart import 'package:cloud_firestore/cloud_firestore.dart'; class FirestoreService { final FirebaseFirestore _db = FirebaseFirestore.instance; // Create a document Future createUser({ required String userId, required String name, required String email, }) async { await _db.collection('users').doc(userId).set({ 'name': name, 'email': email, 'createdAt': FieldValue.serverTimestamp(), }); } // Read a document Future getUser(String userId) async { return await _db.collection('users').doc(userId).get(); } // Read all documents (stream) Stream getUsers() { return _db.collection('users').snapshots(); } // Update a document Future updateUser({ required String userId, required Map data, }) async { await _db.collection('users').doc(userId).update(data); } // Delete a document Future deleteUser(String userId) async { await _db.collection('users').doc(userId).delete(); } // Query with filters Future getUsersByAge(int minAge) async { return await _db .collection('users') .where('age', isGreaterThan: minAge) .orderBy('age') .limit(10) .get(); } // Add to array Future addFavorite(String userId, String itemId) async { await _db.collection('users').doc(userId).update({ 'favorites': FieldValue.arrayUnion([itemId]), }); } // Remove from array Future removeFavorite(String userId, String itemId) async { await _db.collection('users').doc(userId).update({ 'favorites': FieldValue.arrayRemove([itemId]), }); } } ``` ### Real-time Updates 🔄 ```dart class UserListWidget extends StatelessWidget { final FirestoreService _firestoreService = FirestoreService(); @override Widget build(BuildContext context) { return StreamBuilder( stream: _firestoreService.getUsers(), builder: (context, snapshot) { if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); } if (snapshot.connectionState == ConnectionState.waiting) { return CircularProgressIndicator(); } final users = snapshot.data!.docs; return ListView.builder( itemCount: users.length, itemBuilder: (context, index) { final user = users[index].data() as Map; return ListTile( title: Text(user['name'] ?? ''), subtitle: Text(user['email'] ?? ''), ); }, ); }, ); } } ``` ## 📦 Firebase Storage ### Upload Images 📸 ```dart import 'package:firebase_storage/firebase_storage.dart'; import 'dart:io'; class StorageService { final FirebaseStorage _storage = FirebaseStorage.instance; // Upload image Future uploadImage({ required File file, required String path, }) async { try { // Create reference final ref = _storage.ref().child(path); // Upload file final uploadTask = ref.putFile(file); // Monitor progress uploadTask.snapshotEvents.listen((TaskSnapshot snapshot) { double progress = snapshot.bytesTransferred / snapshot.totalBytes; print('Upload progress: ${(progress * 100).toStringAsFixed(2)}%'); }); // Wait for upload to complete await uploadTask; // Get download URL final downloadUrl = await ref.getDownloadURL(); return downloadUrl; } catch (e) { print('Upload error: $e'); return null; } } // Delete image Future deleteImage(String path) async { await _storage.ref().child(path).delete(); } // Get download URL Future getDownloadUrl(String path) async { return await _storage.ref().child(path).getDownloadURL(); } } ``` ### Upload with Progress Bar 📊 ```dart class ImageUploadWidget extends StatefulWidget { @override _ImageUploadWidgetState createState() => _ImageUploadWidgetState(); } class _ImageUploadWidgetState extends State { double _uploadProgress = 0.0; bool _isUploading = false; Future _uploadImage(File file) async { setState(() => _isUploading = true); final ref = FirebaseStorage.instance .ref() .child('uploads/${DateTime.now().millisecondsSinceEpoch}.jpg'); final uploadTask = ref.putFile(file); uploadTask.snapshotEvents.listen((snapshot) { setState(() { _uploadProgress = snapshot.bytesTransferred / snapshot.totalBytes; }); }); await uploadTask; final url = await ref.getDownloadURL(); print('Download URL: $url'); setState(() => _isUploading = false); } @override Widget build(BuildContext context) { return Column( children: [ if (_isUploading) LinearProgressIndicator(value: _uploadProgress), ElevatedButton( onPressed: _isUploading ? null : () { // Pick image and upload }, child: Text('Upload Image'), ), ], ); } } ``` ## 💡 Best Practices ### ✅ DO: - 🔐 **Use Security Rules**: Protect your data - 🔄 **Cache data**: Use offline persistence - 📊 **Index queries**: Improve performance - 🎯 **Paginate results**: Don't load everything at once - ♻️ **Clean up listeners**: Prevent memory leaks ### ❌ DON'T: - ⚠️ **Store sensitive data**: Use proper encryption - 🔥 **Allow open access**: Set proper security rules - 📈 **Make excessive reads**: Optimize queries - 💰 **Ignore costs**: Monitor your usage - 🐌 **Sync everything**: Be selective ## 🎉 Conclusion Firebase + Flutter is a powerful combination! You now know: - 🔧 How to set up Firebase - 🔐 User authentication - 💾 Database operations - 📦 File storage Start building amazing apps with Firebase! 🚀 ## 📚 Resources - 🔗 [Firebase Documentation](https://firebase.google.com/docs) - 🔗 [FlutterFire Documentation](https://firebase.flutter.dev) - 🔗 [Firebase Console](https://console.firebase.google.com) - 🔗 [Firebase YouTube Channel](https://www.youtube.com/firebase)