Flutter and Firebase, A Perfect Pair for Mobile App Development

As a mobile app developer, you want to build high-quality, feature-rich, and engaging apps that deliver a seamless user experience. But, you also want to do this quickly and efficiently, without having to write separate codebases for different platforms.

Flutter is a mobile app development framework created by Google that allows you to build natively compiled applications for mobile, web, and desktop from a single codebase. It uses the Dart programming language and offers a number of powerful features, such as hot reload a rich set of customizable widgets, and integrated testing support.

Firebase, on the other hand, is a mobile and web application development platform developed by Google. It provides a number of services, including a real-time database, user authentication, and hosting, that can help you add powerful features to your app quickly and easily.

Together, Flutter and Firebase provide a powerful and flexible solution for mobile app development. With Flutter, you can build beautiful, fast, and responsive user interfaces, while Firebase provides the back-end services and infrastructure that your app needs to function.

Connect Firebase with Flutter

If you don’t already have a Flutter app, you can complete the Get Started: Test Drive to create a new Flutter app using your preferred editor or IDE.

Step 1: Install the required command line tools:

1. If you haven’t already, install the Firebase CLI.
2. Log into Firebase using your Google account by running the following command:

firebase login

3. Install the FlutterFire CLI by running the following command from any directory:

dart pub global activate flutterfire_cli

Step 2: Configure your apps to use Firebase:

Use the FlutterFire CLI to configure your Flutter apps to connect to Firebase.

From your Flutter project directory, run the following command to start the app configuration workflow:

flutterfire configure

Step 3: Initialize Firebase in your app:

1. From your Flutter project directory, run the following command to install the core plugin:

flutter pub add firebase_core

2. From your Flutter project directory, run the following command to ensure that your Flutter app’s Firebase configuration is up-to-date:

flutterfire configure

3. In your lib/main.dart file, import the Firebase core plugin and the configuration file you generated earlier:

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

4.Also in your lib/main.dart file, initialize Firebase using the DefaultFirebaseOptions object exported by the configuration file:

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);

5. Rebuild your Flutter application:

flutter run

For more, visit Firebase documentation.

FlutterFire plugin packages

The Firebase plugin for Flutter provides a number of packages that you can use to integrate your Flutter app with Firebase services, such as authentication, real-time data synchronization, cloud storage, and cloud messaging.

• “cloud_firestore” : package that you can use to access the Cloud Firestore API from your Flutter code.

• “firebase_auth” : This package provides the authentication APIs, such as signing in with email and password, creating and managing users, and integrating with third-party authentication providers like Google and Facebook.

• “firebase_database” : This package provides the Realtime Database API, allowing you to store and retrieve data in real-time, and automatically receive updates when the data changes.

• “firebase_storage” : This package provides the Cloud Storage API, allowing you to store and retrieve files in the cloud

• “firebase_messaging” : This package provides the Cloud Messaging API, allowing you to send and receive messages on Android and iOS devices.

Cloud Firestore

Cloud Firestore is a cloud-based, NoSQL database provided by Firebase. It is a document-oriented database, which means that it stores data in the form of documents that contain fields with values. These documents are organized into collections, which can contain multiple documents and subcollections.

To use Cloud Firestore in your Flutter app, you will need to do the following:

1. Install the "cloud_firestore" package from the Firebase plugin for Flutter.
2. Import the “cloud_firestore package in your Flutter code.
3. Initialize the Cloud Firestore instance by calling FirebaseFirestore.instance.
4. Use the Cloud Firestore API to perform operations on your data, such as creating, updating, and deleting documents and collections.

Examples of Cloud Firestore API operations on your data, such as creating, updating, and deleting documents and collections:

make a reference with your collection by:

CollectionReference _collectionReference =
            FirebaseFirestore.instance.collection('collectionName');

Fetch data from your collection:

 var items = await _collectionReference.get();

you can use “where” and “orderBy” clauses for filtering and sorting your query. use “limit” to limit the number of results returned by a query.

var items = await _collectionReference
              .where('name', isEqualTo: 'john')
              .where('age',
                  isGreaterThanOrEqualTo:
                      22)
              .orderBy('age', descending: true)
              .limit(15)
              .get();

List<QueryDocumentSnapshot<Object?>> _fetchedDocs = items.docs;

This query will retrieve the first 15 users whose name is “john” and whose age is greater than or equal to 22 years old, sorted by their age in descending order. You can combine multiple “where” clauses to create more complex queries, and you can use the “orderBy” clause multiple times to specify multiple sort orders.

Note that the The “limit” clause is applied after the “where” and “orderBy” clauses, so it will only affect the final results of the query.

Add / update / set data to your collection:

await _collectionReference.add({'name': "john", 'age': 25}).then((value) {
         ////
});

 _collectionReference.doc(docId).update({'name': "johns"});

_collectionReference.doc(docId).set({
            'age': 22,
          }, SetOptions(merge: true));

“set” can be used to update or replace a document if exist, and create new doc if doesn’t exists the doc. if setOptions “merge” is given true, the function will update the doc by merging the given field. You can add a new field and update the document by using set with “merge” equals true, and replace the document if it is given false.

To learn more, visit official FlutterFire documentations.

Overall, Flutter and Firebase are a great choice for building high-quality, scalable, and real-time mobile applications