Flutter Firestore example – Firebase Firestore CRUD with ListView

Cloud Firestore helps us store data in the cloud. It supports offline mode so our app will work fine (write, read, listen to, and query data) whether device has internet connection or not, it automatically fetches changes from our database to Firebase Server. We can structure data in our ways to improve querying and fetching capabilities. This tutorial shows you a Flutter app that can do Firestore CRUD Operations with ListView widget.

Related Posts:
How to integrate Firebase into Flutter App – Android Studio
Flutter Navigator example – Send/Return data to/from new Screen
Flutter ListView example with ListView.builder

Firebase Database: Flutter Firebase Database example – Firebase Database CRUD with ListView

Flutter Firestore Example Overview

We will build a Flutter App that supports showing, inserting, editing, deleting Notes from/to Cloud Firestore Database with ListView:

flutter-firebase-firestore-example-crud-listview-overview

Firebase Console for Firestore will be like:

flutter-firebase-firestore-example-crud-listview-firebase-console-result

You can find how to:
– use Flutter ListView at: Flutter ListView example with ListView.builder
– send/receive data between screens at: Flutter Navigator example – Send/Return data to/from new Screen

Cloud Firestore

Add Firestore to Flutter App

We’ve already had a Tutorial, please visit: How to integrate Firebase into Flutter App – Android Studio.

Initialize & Reference

Create

Assume that our database structure is like:

Using set() to create or overwrite a single document:

Read

– get all Documents from Collection:

Update

Delete

Practice

Set up Project

Follow these steps to add Firestore to the Project.

Project Structure

flutter-firebase-firestore-example-crud-listview-project-structure

Data Model

lib/model/note.dart

Firebase Firestore Data Service

lib/service/firebase_firestore_service.dart

UI
List of Items Screen

lib/ui/listview_note.dart

Item Screen

lib/ui/note_screen.dart

Source Code

flutter_firebase_firestore

By grokonez | July 31, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*