CSL-341 Mobile Application Development Lab

Lab 12 – Persistence Storage (Continue)

Introduction
Persistent storage is any data storage device that retains data after power to that device is shut off. It is
also sometimes referred to as nonvolatile storage. For example:

• Hard Disk
• Solid-State Drive
• Universal Serial Bus
• Phone local storage etc.

Firebase
Firebase is a BaaS (Backend as a Service) app development platform. It provides many features to speed
up the mobile application development like authentication service, cloud storage, etc. One of the main
feature of Firebase is Cloud Firestore, a cloud based real time NoSQL database.

To use Cloud Firestore, we need to install Firebase CLI.

Firebase CLI
The Firebase CLI provides a variety of tools for managing, viewing, and deploying to Firebase projects.

You can install the Firebase CLI for Windows using one of the following options:

• standalone binary
• npm
o Use npm (the Node Package Manager) to install the CLI and enable the globally available
firebase command.
o Download and install Node.js and Git from the following links:
▪ https://nodejs.org/en
▪ https://git-scm.com/downloads
o After installing Node.js and Git, set path of both in the environment variable and open
command prompt (cmd) and run the following command:

o It will install Firebase CLI into your system.

Once Firebase CLI is installed, login to the firebase using the following command:

This command will give you a link to login into Firebase, just copy that link and open it in your browser
and follow the steps to login. You will see a successful message in your command prompt window after
successful login to Firebase.

1
 CSL-341 Mobile Application Development Lab

Install and run the Flutter Fire CLI

From any directory, run the following command:

Create or open an existing project

From the root of your Flutter project directory, run the following command:

This command will fetch all the firebase projects. We can select the Firebase project as well as the
platforms with which we want to configure our project.

This automatically registers your per-platform apps with Firebase and adds
a lib/firebase_options.dart configuration file to your Flutter project.

Hands-on on Cloud Firestore Database

Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your
mobile and web apps.

To use Firestore Database, add following dependencies in your Flutter project by running the following
commands:

Import following packages into your Flutter project:

Modify your main function

2
 CSL-341 Mobile Application Development Lab

Insert data
First create an instance of Firestore database to access methods provided by Firestore.

If the document ID is auto generated, we just have to add data into the collection.

If the document ID is not auto generated, we should provide document ID as well.

Update data
To update data, we need to invoke the update method provided by Firestore.

Delete data
To delete data, we need to invoke the delete method provided by Firestore.

Read data
First, we take a snapshot of the data collection. Save that data collection snapshot into document
snapshot. It will save all the document ids and data into document snapshot. We can access that data
from this document snapshot.

To read data from Firestore, we use stream builder. It is a widget that builds itself based on the latest
snapshot of interaction with a stream.

3
 CSL-341 Mobile Application Development Lab

Example 1: (Cloud Fire-Store)

import 'package:flutter/material.dart';

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

Future<void> main() async {

WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(
const MaterialApp(
home: MainApp(),
),
);
}

4
 CSL-341 Mobile Application Development Lab

class MainApp extends StatefulWidget {

const MainApp({super.key});

@override
State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {

TextEditingController cName = TextEditingController();
TextEditingController cId = TextEditingController();
final db = FirebaseFirestore.instance;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Firebase Example'),
backgroundColor: Colors.blueAccent,
),
body: Container(
margin: const EdgeInsets.fromLTRB(10, 20, 10, 20),
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
labelText: 'Enter ID',
border: OutlineInputBorder(),
),
controller: cId,
),
const SizedBox(
height: 20,
),
TextFormField(
decoration: const InputDecoration(
labelText: 'Enter Name',
border: OutlineInputBorder(),
),
controller: cName,

5
 CSL-341 Mobile Application Development Lab

),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () async {
await db
.collection('data')
.doc(cId.text)
.set({'Name': cName.text});
//await db.collection('data').add({'Name': cName.text});
setState(() {});
},
child: const Text('Save Data'),
),
const SizedBox(
height: 20,
),
StreamBuilder(
stream: db.collection('data').snapshots(),
builder: (context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return const CircularProgressIndicator();
} else {
return Expanded(
child: ListView.builder(
itemCount: snapshot.data?.docs.length,
itemBuilder: (context, int index) {
DocumentSnapshot documentSnapshot =
snapshot.data.docs[index];
return ListTile(
title: Text(documentSnapshot['Name']),
leading: IconButton(
onPressed: () {
db
.collection('data')
.doc(documentSnapshot.id)
.update(
{

6
 CSL-341 Mobile Application Development Lab

'Name': 'Ahmed',
},
);
},
icon: const Icon(Icons.update),
),
trailing: IconButton(
onPressed: () {
db
.collection('data')
.doc(documentSnapshot.id)
.delete();
},
icon: const Icon(Icons.delete),
),
);
},
),
);
}
},
),
],
),
),
);
}
}