DEV Community

Cover image for Simplifying CRUD Operations with Firestore and Flutter: A Beginner's Guide
Dhanush Vardhan
Dhanush Vardhan

Posted on

Simplifying CRUD Operations with Firestore and Flutter: A Beginner's Guide

Welcome, Flutter enthusiasts and future mobile app developers! If you're looking to create dynamic, scalable, and real-time mobile applications, learning how to perform CRUD (Create, Read, Update, Delete) operations with Firestore in Flutter is essential. This beginner-friendly guide will walk you through the fundamental steps of integrating Firestore with Flutter and how to work with photos within your app.

Before diving in, make sure you have the following ready:

  • A basic understanding of Dart and Flutter.
  • Flutter installed on your machine.
  • And make sure you were your thinking caps !!

Step 1: Create a Firebase Project

Navigate to your Firebase Console and click Add Project.

Create Firebase Project 1

Step 2: Setup Your Firebase Project

Give your project a name and enable google analytics.

Create Firebase Project 2

Create Firebase Project 3

Create Firebase Project 4

Step 3: Connecting the Flutter App to the Firebase Project

To connect the flutter app to firebase, we must install firebase-cli. (PS: this requires nodejs to be installed https://nodejs.org/en/download)

npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode
firebase login
Enter fullscreen mode Exit fullscreen mode

Now go ahead and click the Flutter icon on the dashboard of your firebase project.

Connect Flutter App to Firebase 1

Connect Flutter App to Firebase 2

Run the commands and you'll have your Firebase Project connected to your Flutter App

Now navigate to main.dart and paste this code just above your runApp()

Initialize Firebase in Flutter App

Lesssgoooo ๐ŸŽ‰ you've SUCCESSFULLY Connected your Flutter app to Firebase

Now you just have to navigate to Firestore and enable the feature

Firestore Enabling
Firestore Enabling 2

Step 4: Adding Dependencies

First, add the necessary Firestore package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^latest_version
  firebase_storage: ^latest_version
Enter fullscreen mode Exit fullscreen mode

After saving the file, run flutter pub get in your terminal to install the packages.

CRUD Operations

Create (Adding Data)
To add data to Firestore, you'll use the collection and add methods:

FirebaseFirestore.instance.collection('users').add({
  'name': 'Jane Doe',
  'age': 30,
  'email': 'jane.doe@example.com',
});
Enter fullscreen mode Exit fullscreen mode

Read (Retrieving Data)
To fetch data, you'll use collection and get:

FirebaseFirestore.instance.collection('users').get().then((querySnapshot) {
  querySnapshot.docs.forEach((result) {
    print(result.data());
  });
});
Enter fullscreen mode Exit fullscreen mode

Update (Modifying Data)
For updating a document, you'll need its ID:

FirebaseFirestore.instance.collection('users').doc(documentId).update({
  'age': 31,
});
Enter fullscreen mode Exit fullscreen mode

Delete (Removing Data)
To delete a document, also use the document's ID:

FirebaseFirestore.instance.collection('users').doc(documentId).delete();
Enter fullscreen mode Exit fullscreen mode

Integrating Photos with Firestore and Flutter
Working with photos involves storing the images in Firebase Storage and keeping references in Firestore.

Uploading Images

Apart from just Firestore, Firebase offers a lot of other features to like Firebase Storage and much more....

Now lets take a loot at how to use Firebase Storage!!

Step 1: Uploading Images into the Firebase Storage

FirebaseStorage storage = FirebaseStorage.instance;
TaskSnapshot snapshot = await storage.ref('uploads/user-profile.jpg').putFile(imageFile);
String downloadUrl = await snapshot.ref.getDownloadURL();
Enter fullscreen mode Exit fullscreen mode

Step 2: Storing Image URLs in Firestore
After uploading, save the image URL to Firestore:

FirebaseFirestore.instance.collection('users').doc(userId).update({
  'profileImageUrl': downloadUrl,
});
Enter fullscreen mode Exit fullscreen mode

Step 3: Displaying Images in Flutter
To display the image, use the Image.network widget with the Firestore URL:

Image.network(downloadUrl);
Enter fullscreen mode Exit fullscreen mode

Congratulations! ๐ŸŽ‰๐ŸŽ‰

You now have a foundational understanding of CRUD operations in Firestore with Flutter and how to integrate photos into your app. As you continue your journey, remember that practice is key to mastery. Keep experimenting, building, and learning.

Happy coding!

Top comments (0)