Simplifying CRUD Operations with Firestore and Flutter: A Beginner's Guide
Tags: flutter, firebase, programming, beginners
Published: 2023-11-07 05:32:12


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/an64chk2dxmit0l9ph3d.png)

## Step 2: Setup Your Firebase Project
Give your project a name and enable google analytics.

![Create Firebase Project 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68jutmrmzx7abbmk0dae.png)

![Create Firebase Project 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zej57sxtn1ykbkqxxypw.png)


![Create Firebase Project 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3md1p8mlqxd658b89vr0.png)


## 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)**

```javascript 
npm install -g firebase-tools
```
```javascript
firebase login
```

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


![Connect Flutter App to Firebase 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3ttgnu23lu4rccwwtt9.png)

![Connect Flutter App to Firebase 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at8ch4tcs8kq6nrrrjta.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3jo3z0uw3l3gmsmwruv.png)


## Lesssgoooo 🎉 you've SUCCESSFULLY Connected your Flutter app to Firebase

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


![Firestore Enabling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhkpi7uets25lphjuhm3.png)
![Firestore Enabling 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxvahub9rgwjwbnaiun6.png)



## Step 4: Adding Dependencies

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

```dart 
dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^latest_version
  firebase_storage: ^latest_version
```

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:

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

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

```dart 
FirebaseFirestore.instance.collection('users').get().then((querySnapshot) {
  querySnapshot.docs.forEach((result) {
    print(result.data());
  });
});
```
Update (Modifying Data)
For updating a document, you'll need its ID:

```dart 
FirebaseFirestore.instance.collection('users').doc(documentId).update({
  'age': 31,
});
```

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

```dart 
FirebaseFirestore.instance.collection('users').doc(documentId).delete();
```
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
```dart 
FirebaseStorage storage = FirebaseStorage.instance;
TaskSnapshot snapshot = await storage.ref('uploads/user-profile.jpg').putFile(imageFile);
String downloadUrl = await snapshot.ref.getDownloadURL();
```

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

```dart 
FirebaseFirestore.instance.collection('users').doc(userId).update({
  'profileImageUrl': downloadUrl,
});
```

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

```dart 
Image.network(downloadUrl);
```

## 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!