Flutter and Firebase Master Class: CRUD Operations

Introduction

• Objective: Learn the four most important database operations (CRUD: Create, Read, Update, Delete) by building a simple notes app using Flutter and Firebase.
• Setup: Utilize Firebase console and Flutter to create and connect a project.

Setting Up Firebase with Flutter

1. Create Firebase Project:

   • Go to Firebase console and create a new project named crud_tutorial.

2. Connect Firebase to Flutter Project:

   • Open a new Flutter project.
   • Ensure your Firebase CLI is installed. Login using Firebase login.
   • Activate FlutterFire CLI using flutter Pub Global activate flutterfire_cli.
   • Configure Firebase with flutterfire configure, selecting the newly created project and targeting both Android and iOS.
   • Add Firebase core package: flutter Pub add Firebase core.
   • Initialize Firebase in Flutter (in the main function): WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp();

3. Create Firestore Database:

   • In Firebase console, create a Firestore database.
   • Set database rules to allow reads and writes.

Building the Notes App

Initial Setup

• Create a blank MaterialApp structure with a homepage.
• Add a floating action button (FAB) to the app.

Services Setup

• Create a services folder and a firestore_service.dart file.
• Define CRUD operations in Firestore service:
  • Collection Reference: Setup to reference the notes collection.
  • Create (Add Note): Method to add a new note with a timestamp.

UI Setup

1. Create A Note

   • Use FAB to open a dialog allowing users to add a note.
   • Capture user input with a TextController.
   • Save the note using the addNote method and update the UI.

2. Read Notes

   • Implement a getNotesStream method using a stream to listen for database changes.
   • Display notes in a ListView within a StreamBuilder.

3. Update Notes

   • Include an edit button (gear icon) to open a dialog for note updates.
   • Use a shared method openNoteBox to handle both create and update functionalities.
   • Implement updateNote method to modify existing notes.

4. Delete Notes

   • Add a delete button alongside the edit button.
   • Implement a deleteNote function to remove notes.

Final Touches

• Handle errors and ensure the UI updates correctly after each CRUD operation.

Conclusion

• Successfully implemented a simple notes app using CRUD operations with Flutter and Firebase.
• These operations can be used as a foundation to create more complex applications.