Lab 10
Lab 10
Student Name
CMSID
Semester 5th
Lesson Set Adding Support for Remote Storage and Databases
Using Firebase
10
Purpose 1. Integrate Firebase into a Flutter app.
2. Perform CRUD operations using Cloud Firestore.
3. Use Firebase Storage to upload and retrieve files.
Procedure 4. Students should read the Pre-lab Reading assignment before coming to the
lab.
5. Students should complete the Pre-lab Writing assignment before entering
the lab.
6. In the lab, students should complete Labs 10.1 through 10.4 in sequence.
Your instructor will give further instructions on grading and completing the
lab.
7. Students should complete the set of lab tasks before the next lab and get
them checked by their lab instructor.
Lab 10
2|Page
PRE-LAB READING ASSIGNMENT
Example:
3|Page
Collection: posts
Document: {
id: "1",
title: "My First Post",
body: "This is the content of my first post."
}
CRUD Operations:
Create: Adding new documents.
Read: Retrieving documents or collections.
Update: Modifying existing documents.
Delete: Removing documents.
Offline Data Sync: Firestore supports offline access by caching data locally.
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
4|Page
await Firebase.initializeApp();
runApp(MyApp());
}
// Example usage:
await addData('posts', {'title': 'New Post', 'bo1dy': 'This is a post.'});
// Example usage:
final posts = await fetchData('posts');
for (var post in posts) {
print(post.data());
}
5|Page
Update (Modify Data): Update a specific document
Future<void> updateData(String collectionName, String docId,
Map<String, dynamic> updatedData) async {
await FirebaseFirestore.instance
.collection(collectionName)
.doc(docId)
.update(updatedData);}
// Example usage:
await updateData('posts', 'postId', {'title': 'Updated Title'});
// Example usage:
await deleteData('posts', 'postId');
6|Page
PRELAB WRITING ASSIGNMENT
Fill in the 1. Firebase provides a suite of cloud-based services for __________ app
blanks development.
2. The Firebase component used for storing and syncing data in real-time is
__________.
5. Firestore supports offline access by __________ data locally when offline and
syncing it when back online.
7|Page
Lab 10.2 Lab Tasks
Setup Firebase
Open the Firebase console and create a new project.
Register your app (for both Android and iOS if applicable).
Download and place the necessary configuration files (google-services.json or
GoogleService-Info.plist) in your project.
Task 2: Design a Social Media App UI with Image Upload and Download Features
8|Page
The objective of this task is to design a User Interface (UI) for a basic social media app. The
app should allow users to upload, update, read, and delete posts, with an additional feature to
include an image in the post and download it by long-tapping.
Upload Screen:
Create a screen to allow users to add a new post.
Include the following elements:
o A text field for the post title.
o A text field for the post description.
o A button to select an image from the device gallery.
o A preview of the selected image.
o An "Upload" button to save the post.
Update Screen:
Include an "Edit" button next to each post in the feed.
When the "Edit" button is tapped, open a screen with:
o Pre-filled fields for the post title and description.
o An option to change the image.
o An "Update" button to save changes.
Delete Functionality:
On tapping the delete icon, show a confirmation dialog:
o "Are you sure you want to delete this post?"
o Include "Yes" and "No" buttons.
Download Image:
Implement a long-press gesture on the image in the feed to save it to the device's
storage.
Provide feedback, such as a snackbar notification:
o "Image downloaded successfully!"
Guidelines
1. Use Flutter widgets to design the app, including:
o ListView for the feed screen.
o ImagePicker package to select images from the gallery.
o GestureDetector for handling long-press gestures.
o SnackBar or Toast for feedback.
o Dialog for delete confirmation.
2. Keep the design user-friendly and responsive.
3. Ensure that:
o Images are displayed properly in the feed (e.g., as thumbnails).
o Full-size images are downloaded when long-tapped.
9|Page
Screenshot should be pasted here.
GitHub Repository link.
Note: Make sure to upload the code for each task to a GitHub repository. Do not update or
change the repository after the due date. Provide the link to your GitHub repository with each
task submission.
10 | P a g e