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


4 thoughts on “Flutter Firestore example – Firebase Firestore CRUD with ListView”

  1. Hi, first of all, awesome post, something which I was looking for. I just have one query, how can I manage(CRUD) a field of type array in firestore. I want to store dates for user for a particular year, and feel arrays should be the datatype to use, do you think there another way of storing this information?

    Thanks for the post, awaiting your response.

  2. All throughout the instructions the direction is to put the darts under /lib/…

    ##
    List of Items Screen
    lib/ui/listview_note.dart
    ##

    but in the dart files the imports statements reference them otherwise:

    ##
    import ‘package:flutter_firebase/model/note.dart’;
    import ‘package:flutter_firebase/ui/note_screen.dart’;
    ##

    while i have put the code under /lib/ and changed the import references, the call in main.dart to:

    ##
    ‘package:flutter_firebase/lib/ui/listveiw_note.dart’;
    ##

    will not compile for me .. and i cannot get it to?? Feedback from AS suggest it knows nothing about a package called ‘flitter_firebase/lib’ ???

Got Something To Say:

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

*