Connecting a Flutter application with Firebase allows developers to add backend capabilities such as authentication, cloud databases, file storage, push notifications, analytics, crash reporting, and other Firebase services. Flutter communicates with Firebase through the official FlutterFire plugins.
The standard Firebase integration workflow uses the Firebase CLI and FlutterFire CLI. The flutterfire configure command connects the Flutter project with a Firebase project and generates the firebase_options.dart configuration file.
A Flutter application normally contains the user interface and application logic. Firebase can provide many of the backend services required by the application.
Flutter Application
↓
FlutterFire
↓
Firebase Services
↓
Authentication / Database / Storage / MessagingFor example, a Flutter login screen can use Firebase Authentication to create and authenticate users, while Cloud Firestore can store additional profile information.
Flutter UI
↓
Dart Application Logic
↓
FlutterFire Plugin
↓
Firebase Service
↓
Cloud Backend
↓
Response / Stream
↓
Flutter UI UpdateFirebase provides ready-to-use backend services that can reduce the amount of custom backend infrastructure required for many applications.
Login / Registration
↓
Firebase Authentication
↓
User Profile
↓
Cloud Firestore
↓
Images / Files
↓
Firebase Storage
↓
Notifications
↓
Firebase Cloud MessagingFlutterFire is the collection of official Flutter plugins that allows Flutter applications to communicate with Firebase services.
| Firebase Service | Flutter Plugin | Purpose |
|---|---|---|
| Firebase Core | firebase_core |
Initializes Firebase |
| Authentication | firebase_auth |
Login and user authentication |
| Cloud Firestore | cloud_firestore |
Cloud NoSQL database |
| Realtime Database | firebase_database |
Real-time database |
| Cloud Storage | firebase_storage |
File and media storage |
| Cloud Messaging | firebase_messaging |
Push notifications |
| Analytics | firebase_analytics |
Application analytics |
| Crashlytics | firebase_crashlytics |
Crash and error reporting |
| Remote Config | firebase_remote_config |
Remote application configuration |
Firebase provides Flutter plugins for these and other Firebase services.
Before connecting Firebase with Flutter, make sure that you have:
flutter doctorResolve major Flutter environment issues before beginning Firebase integration.
If you do not already have a Flutter project, create one using:
flutter create firebase_demo
cd firebase_demoRun the application:
flutter runMake sure the basic Flutter application runs successfully before adding Firebase.
A Firebase project acts as the cloud-side project associated with your Flutter application.
Flutter Project
↕
Firebase Project
↓
Firebase Services
├── Authentication
├── Firestore
├── Storage
├── Messaging
└── AnalyticsThe Firebase CLI provides command-line tools for managing Firebase projects.
After installing the Firebase CLI, sign in:
firebase loginThe Firebase CLI is used as part of the FlutterFire configuration workflow.
firebase --versionInstall the FlutterFire CLI using Dart:
dart pub global activate flutterfire_cliThe FlutterFire CLI is used to configure Firebase for Flutter applications.
flutterfire --versionOpen the terminal in the root directory of your Flutter project and run:
flutterfire configureThis starts the Firebase configuration workflow.
firebase_options.dart inside the lib directory.The generated configuration file normally appears as:
lib/firebase_options.dartWhen adding a new platform or beginning to use certain new Firebase products, the configuration may need to be updated by running flutterfire configure again.
The firebase_options.dart file contains Firebase configuration for the platforms selected during the configuration process.
A simplified example of how the generated configuration is used is:
import 'firebase_options.dart';
DefaultFirebaseOptions.currentPlatformYou generally should not manually create this file when using the FlutterFire CLI. Let flutterfire configure generate and update it.
Firebase Project
↓
flutterfire configure
↓
Platform Configuration
↓
firebase_options.dart
↓
Firebase.initializeApp()Firebase Core is the basic Firebase plugin required for initializing Firebase in a Flutter application.
flutter pub add firebase_coreAfter adding the package, Flutter updates the project's dependency configuration.
Open lib/main.dart and import Firebase Core and the generated configuration file:
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';Then initialize Firebase before calling runApp().
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Firebase'),
),
body: const Center(
child: Text('Firebase Connected'),
),
),
);
}
} main()
↓
WidgetsFlutterBinding.ensureInitialized()
↓
Firebase.initializeApp()
↓
runApp()
↓
Flutter ApplicationWhen asynchronous initialization is performed before runApp(), Flutter's binding should be initialized first.
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
} This allows Flutter to prepare the necessary bindings before Firebase initialization occurs.
runApp().After initializing Firebase, run the application:
flutter runIf Firebase initializes successfully, the application can start using the Firebase plugins that have been added and configured.
firebase_options.dart exists.Firebase Authentication allows Flutter applications to register users, sign users in, monitor authentication state, and sign users out.
Install the plugin:
flutter pub add firebase_authImport it:
import 'package:firebase_auth/firebase_auth.dart';Firebase Authentication providers must also be enabled in the Firebase Console.
Registration
↓
Firebase Authentication
↓
User Account
↓
Login
↓
Authenticated User
↓
Application FeaturesOnly after enabling the required provider should the Flutter application attempt to use that authentication method.
Future registerUser(
String email,
String password,
) async {
try {
final credential =
await FirebaseAuth.instance.createUserWithEmailAndPassword(
email: email,
password: password,
);
print('User ID: ${credential.user?.uid}');
} on FirebaseAuthException catch (e) {
print('Error: ${e.message}');
}
} Firebase Authentication provides createUserWithEmailAndPassword() for password-based account creation.
After successful registration, Firebase returns a user credential containing information about the authenticated user, including the user's UID.
Future loginUser(
String email,
String password,
) async {
try {
final credential =
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: email,
password: password,
);
print('Logged in: ${credential.user?.email}');
} on FirebaseAuthException catch (e) {
print('Error: ${e.message}');
}
} Email + Password
↓
signInWithEmailAndPassword()
↓
Firebase Authentication
↓
User Credential
↓
Authenticated ApplicationFuture logoutUser() async {
await FirebaseAuth.instance.signOut();
} Calling signOut() ends the current authentication session.
The currently authenticated user can be accessed using currentUser.
final user = FirebaseAuth.instance.currentUser;
if (user != null) {
print(user.uid);
print(user.email);
}If no user is authenticated, currentUser can be null.
Firebase Authentication provides streams that can be used to react to authentication state changes.
StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (snapshot.hasData) {
return const Text('User is logged in');
}
return const Text('User is logged out');
},
) This is useful when an application needs to display a login screen for unauthenticated users and a home screen for authenticated users.
Application Starts
↓
authStateChanges()
↓
Is User Authenticated?
↙ ↘
Yes No
↓ ↓
Home Screen Login ScreenCloud Firestore is a cloud-hosted NoSQL database that can store and synchronize application data.
Install the plugin:
flutter pub add cloud_firestoreImport the plugin:
import 'package:cloud_firestore/cloud_firestore.dart';Access the Firestore instance using:
final FirebaseFirestore firestore =
FirebaseFirestore.instance;Firestore data is organized using collections and documents.
users
├── user001
│ ├── name
│ ├── email
│ └── course
└── user002
├── name
├── email
└── courseCollection
↓
Document
↓
FieldsFor example, users can be a collection, user001 can be a document, and name, email, and course can be fields.
Future addUser() async {
await FirebaseFirestore.instance
.collection('users')
.add({
'name': 'Rahul',
'email': '[email protected]',
'course': 'Flutter',
});
} The add() method creates a document with an automatically generated document ID.
Future createUser() async {
await FirebaseFirestore.instance
.collection('users')
.doc('user001')
.set({
'name': 'Rahul',
'email': '[email protected]',
'course': 'Flutter',
});
} The doc() method allows the application to specify the document ID.
Future getUser() async {
final document = await FirebaseFirestore.instance
.collection('users')
.doc('user001')
.get();
if (document.exists) {
print(document.data());
}
} The get() method retrieves a document once.
Firestore's real-time listeners can be connected to Flutter widgets using StreamBuilder.
StreamBuilder(
stream: FirebaseFirestore.instance
.collection('users')
.snapshots(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.hasError) {
return const Center(
child: Text('Unable to load users'),
);
}
final users = snapshot.data?.docs ?? [];
if (users.isEmpty) {
return const Center(
child: Text('No users found'),
);
}
return ListView.builder(
itemCount: users.length,
itemBuilder: (context, index) {
final data =
users[index].data() as Map;
return ListTile(
title: Text(data['name'] ?? 'Unknown'),
subtitle: Text(data['email'] ?? ''),
);
},
);
},
) Firestore
↓
snapshots()
↓
Stream
↓
StreamBuilder
↓
Flutter Widget
↓
UI UpdatesFuture updateUser() async {
await FirebaseFirestore.instance
.collection('users')
.doc('user001')
.update({
'name': 'Amit',
'course': 'Advanced Flutter',
});
} The update() method changes specified fields in an existing document.
Future deleteUser() async {
await FirebaseFirestore.instance
.collection('users')
.doc('user001')
.delete();
} The delete() method removes the specified document.
Create → add() / set()
Read → get() / snapshots()
Update → update()
Delete → delete()Firebase Cloud Storage can be used for user-generated files such as images, videos, and documents.
Install the plugin:
flutter pub add firebase_storageImport it:
import 'package:firebase_storage/firebase_storage.dart';Cloud Storage is designed to store and serve user-generated content.
After obtaining a local file through an appropriate Flutter file or image picker, it can be uploaded to Firebase Storage.
final reference = FirebaseStorage.instance
.ref()
.child('profile_images/user001.jpg');
await reference.putFile(file);
final downloadUrl =
await reference.getDownloadURL();
print(downloadUrl);Local File
↓
Storage Reference
↓
putFile()
↓
Firebase Storage
↓
getDownloadURL()
↓
Download URL
↓
Firestore / Flutter UIFirebase Cloud Messaging, or FCM, can be used to send notifications and messages to supported Flutter applications.
Install the plugin:
flutter pub add firebase_messagingImport the package:
import 'package:firebase_messaging/firebase_messaging.dart';final messaging = FirebaseMessaging.instance;
await messaging.requestPermission(
alert: true,
badge: true,
sound: true,
);Additional platform-specific notification configuration may be required, particularly for Apple platforms.
Firebase Cloud Messaging
↓
Notification Message
↓
Flutter Application
↓
Notification Handling
↓
User InteractionFirebase Analytics can be used to understand application usage and user engagement.
Install the plugin:
flutter pub add firebase_analyticsExample event:
import 'package:firebase_analytics/firebase_analytics.dart';
final analytics = FirebaseAnalytics.instance;
await analytics.logEvent(
name: 'button_clicked',
parameters: {
'button_name': 'login',
},
);Crashlytics can collect information about crashes and errors that occur in an application.
Install the plugin:
flutter pub add firebase_crashlyticsExample of recording an error:
try {
// Application operation
} catch (error, stackTrace) {
FirebaseCrashlytics.instance.recordError(
error,
stackTrace,
);
}Crash reporting can help developers identify runtime problems that occur during application use.
Remote Config allows developers to change supported application configuration values remotely without requiring every configuration value to be hard-coded in the application.
Possible use cases include:
Firebase Remote Config
↓
Remote Parameters
↓
Flutter Application
↓
Application BehaviorWhen a Flutter application communicates directly with Firebase services, access control is extremely important.
For example, Firestore Security Rules can restrict access to authenticated users.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read, write: if request.auth != null;
}
}
}This example allows access only when an authenticated user exists. Production applications should design rules according to the application's authorization requirements.
| Concept | Meaning |
|---|---|
| Authentication | Determines who the user is. |
| Authorization | Determines what the user is allowed to access. |
A common application pattern is to use Firebase Authentication for the account and Cloud Firestore for additional user information.
final credential =
await FirebaseAuth.instance
.createUserWithEmailAndPassword(
email: email,
password: password,
);
final uid = credential.user!.uid;
await FirebaseFirestore.instance
.collection('users')
.doc(uid)
.set({
'name': name,
'email': email,
});Here, the authenticated user's UID is used as the Firestore document ID.
Firebase Authentication
↓
User UID
↓
Cloud Firestore
↓
users/{uid}
↓
Profile InformationFirebase operations can fail for different reasons, so asynchronous operations should be handled with try and catch.
try {
await FirebaseAuth.instance
.signInWithEmailAndPassword(
email: email,
password: password,
);
} on FirebaseAuthException catch (e) {
print('Firebase error: ${e.code}');
print(e.message);
} catch (e) {
print('Unexpected error: $e');
}Firebase Operation
↓
Successful?
↙ ↘
Yes No
↓ ↓
Continue Catch Exception
↓
Show User Message| Error | Meaning |
|---|---|
user-not-found |
No account was found for the supplied email. |
wrong-password |
The supplied password is incorrect. |
weak-password |
The supplied password does not satisfy the required password strength. |
invalid-email |
The email address format is invalid. |
email-already-in-use |
The email address is already associated with an account. |
Authentication errors should be handled in a way that provides useful feedback without exposing unnecessary implementation details.
Firebase operations are asynchronous, so the Flutter UI should provide appropriate feedback.
if (isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
if (hasError) {
return const Center(
child: Text('Something went wrong'),
);
}
if (items.isEmpty) {
return const Center(
child: Text('No data available'),
);
}
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Text(items[index].toString());
},
);| State | Typical UI |
|---|---|
| Loading | Progress indicator |
| Error | Error message or retry action |
| Empty | No-data message |
| Success | Actual application content |
For larger applications, Firebase operations should be separated from UI code using service classes.
import 'package:cloud_firestore/cloud_firestore.dart';
class UserService {
final FirebaseFirestore _firestore =
FirebaseFirestore.instance;
Future addUser({
required String name,
required String email,
}) async {
await _firestore.collection('users').add({
'name': name,
'email': email,
});
}
Stream getUsers() {
return _firestore
.collection('users')
.snapshots();
}
} UI
↓
View / Screen
↓
Service / Repository
↓
FlutterFire Plugin
↓
Firebaselib/
├── main.dart
├── firebase_options.dart
├── models/
│ └── user_model.dart
├── services/
│ ├── auth_service.dart
│ ├── firestore_service.dart
│ └── storage_service.dart
├── screens/
│ ├── login_screen.dart
│ ├── register_screen.dart
│ ├── home_screen.dart
│ └── profile_screen.dart
├── widgets/
│ └── user_card.dart
└── providers/
└── auth_provider.dart| Folder | Purpose |
|---|---|
models |
Application data models |
services |
Firebase and backend operations |
screens |
Main application screens |
widgets |
Reusable UI components |
providers |
Application state management when used |
1. Create Flutter Project
↓
2. Create Firebase Project
↓
3. Install Firebase CLI
↓
4. firebase login
↓
5. Install FlutterFire CLI
↓
6. flutterfire configure
↓
7. firebase_options.dart generated
↓
8. Add firebase_core
↓
9. Firebase.initializeApp()
↓
10. Add required Firebase plugins
↓
11. Configure Firebase services
↓
12. Build Flutter UI
↓
13. Connect UI with Firebase
↓
14. Apply Security Rules
↓
15. Test ApplicationPresentation Layer
↓
Application Logic
↓
Firebase Service Layer
↓
FlutterFire Plugins
↓
Firebase Backendimport 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const FirebaseApp());
}
class FirebaseApp extends StatelessWidget {
const FirebaseApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Firebase Demo',
theme: ThemeData(
useMaterial3: true,
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter + Firebase'),
),
body: const Center(
child: Text(
'Firebase is connected!',
style: TextStyle(fontSize: 22),
),
),
);
}
} Suppose an existing Flutter application is already connected to Firebase and you now want to add Firestore.
flutterfire configure when configuration needs updating.cloud_firestore.FirebaseFirestore.instance.flutter pub add cloud_firestore
flutterfire configure
flutter runThe Firebase setup workflow should be kept up to date when adding Firebase products or platforms that require configuration changes.
The main purpose of the integration is to connect Flutter widgets to Firebase operations.
Flutter Button
↓
Dart Function
↓
Firebase Service
↓
Firebase
↓
Response / Stream
↓
Update Flutter UIFor example, a login button can call a Dart function, which calls Firebase Authentication and then navigates the user to the home screen after successful authentication.
User
↓
Tap Login
↓
Flutter Button
↓
Authentication Function
↓
Firebase Authentication
↓
Success / Error
↓
Update UIElevatedButton(
onPressed: () async {
try {
await FirebaseAuth.instance
.signInWithEmailAndPassword(
email: emailController.text.trim(),
password: passwordController.text,
);
if (context.mounted) {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (_) => const HomeScreen(),
),
);
}
} on FirebaseAuthException catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(e.message ?? 'Login failed'),
),
);
}
},
child: const Text('Login'),
)This example demonstrates how Flutter UI, Firebase Authentication, error handling, and navigation can work together.
Firebase provides the Local Emulator Suite for testing supported Firebase services locally during development.
It can be useful for prototyping and testing authentication, Firestore, and other supported Firebase workflows without relying entirely on production services.
Flutter Application
↓
Local Firebase Emulator
↓
Authentication / Firestore / Other Services
↓
Test ResultsUsing local emulators can help developers test backend behavior during development before connecting workflows to production resources.
firebase_core.flutterfire configure.| Problem | Possible Solution |
|---|---|
| Firebase not initialized | Check Firebase.initializeApp(). |
| Configuration missing | Run flutterfire configure. |
| Authentication unavailable | Check the enabled sign-in provider. |
| Permission denied | Review Firebase Security Rules. |
| Data not appearing | Check collection/document paths and asynchronous state. |
| Large widget code | Move Firebase operations into services or repositories. |
firebase_options.dart generated by FlutterFire CLI.Create a Flutter application that uses Firebase to manage students.
users
└── userId
├── name
├── email
└── profileImage
students
└── studentId
├── name
├── email
├── course
└── ageRegister
↓
Firebase Authentication
↓
Create User Profile
↓
Firestore
↓
Home Screen
↓
Student CRUD
↓
Firebase Storage for Profile Image| Screen | Purpose |
|---|---|
| Login Screen | Authenticate existing users |
| Register Screen | Create a new account |
| Home Screen | Display application content |
| Student List | Display Firestore student records |
| Add Student | Create a student document |
| Edit Student | Update an existing student |
| Profile Screen | Display user information and profile image |
| Command | Purpose |
|---|---|
firebase login |
Log in to Firebase CLI |
dart pub global activate flutterfire_cli |
Install FlutterFire CLI |
flutterfire configure |
Configure Flutter application with Firebase |
flutter pub add firebase_core |
Add Firebase Core |
flutter pub add firebase_auth |
Add Firebase Authentication |
flutter pub add cloud_firestore |
Add Cloud Firestore |
flutter pub add firebase_storage |
Add Firebase Storage |
flutter pub add firebase_messaging |
Add Firebase Cloud Messaging |
flutter pub add firebase_analytics |
Add Firebase Analytics |
flutter run |
Run the Flutter application |
flutter doctor
firebase --version
flutterfire --version
flutter pub get
flutter runFlutterFire is the collection of Flutter plugins that connect Flutter applications with Firebase services.
It is a FlutterFire CLI command that configures a Flutter project with Firebase and generates the firebase_options.dart configuration file.
firebase_core provides the core Firebase initialization functionality for Flutter.
It is the generated configuration file containing platform-specific Firebase configuration used when initializing Firebase.
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);flutter pub add firebase_authflutter pub add cloud_firestoreFirebaseFirestore.instanceSecurity Rules determine who can read or write Firebase resources and help protect application data.
Firebase operations are asynchronous and can fail due to authentication problems, permissions, network conditions, invalid data, or other errors. Proper error handling provides a better user experience.
Firebase Authentication manages user identity and sign-in, while Cloud Firestore stores application data such as profiles, products, students, orders, or other documents.
Firebase Storage is used for storing and serving user-generated files such as images, videos, and documents.
| Topic | Important Point |
|---|---|
| FlutterFire | Connects Flutter with Firebase services |
| Firebase CLI | Command-line Firebase management |
| FlutterFire CLI | Configures Firebase for Flutter |
| flutterfire configure | Creates and updates Firebase configuration |
| firebase_options.dart | Generated platform configuration |
| firebase_core | Initializes Firebase |
| firebase_auth | User authentication |
| cloud_firestore | Cloud NoSQL database |
| firebase_storage | Cloud file storage |
| firebase_messaging | Push notifications |
| firebase_analytics | Application analytics |
| firebase_crashlytics | Crash reporting |
| Security Rules | Controls access to Firebase resources |
firebase login
dart pub global activate flutterfire_cli
flutterfire configure
flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add cloud_firestore
flutter runAfter completing this topic, learners should be able to:
firebase_options.dart.flutterfire configure.firebase_core.runApp().Need Backend Service?
↓
Choose Firebase Service
↓
Add FlutterFire Plugin
↓
Configure Firebase
↓
Initialize Firebase
↓
Create Service Layer
↓
Connect UI
↓
Handle States
↓
Secure Resources
↓
TestConnecting Flutter applications with Firebase involves configuring a Firebase project, installing the Firebase CLI and FlutterFire CLI, running flutterfire configure, adding firebase_core, and initializing Firebase in main.dart.
After the core connection is established, individual Firebase plugins such as firebase_auth, cloud_firestore, firebase_storage, and firebase_messaging can be added according to the application's requirements.
The combination of Flutter and Firebase allows developers to build applications where the Flutter UI communicates with cloud-based Firebase services through FlutterFire plugins. Proper initialization, configuration, error handling, authentication, service separation, and Firebase Security Rules are important parts of a production-ready integration.
Flutter
↓
FlutterFire
↓
Firebase Core
↓
Firebase Initialization
↓
┌───────────────────────────────┐
│ Firebase Services │
├───────────────────────────────┤
│ Authentication │
│ Cloud Firestore │
│ Cloud Storage │
│ Cloud Messaging │
│ Analytics │
│ Crashlytics │
│ Remote Config │
└───────────────────────────────┘
↓
Service / Repository Layer
↓
Flutter UI
↓
Secure, Tested Application