Flutter Firebase Database example – Firebase Database CRUD with ListView

Firebase Realtime Database is a cloud-hosted database that helps us to store and sync data with NoSQL cloud database in realtime to every connected client. In this tutorial, we’re gonna build a Flutter App that allows us to make CRUD interactions with Firebase Database in a ListView.

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
Flutter Firestore example – Firebase Firestore CRUD with ListView

Flutter Firestore Example Overview

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


Firebase Console for Realtime Database will be like:


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

Firebase Realtime Database

Configure Android App for Firebase project
Register and Integrate Firebase

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

Setup Firebase Database

Open Firebase Console, and select your project.

Under Develop, select Database:


In Realtime Database, set the Rules:


Update pubspec.yaml

Open pubspec.yaml in Flutter Project. Add a dependency for firebase_database:

Run command: flutter packages get.

CRUD Operations
Initialize & Reference

To get main reference, we need to do is get access to static field in FirebaseDatabase class. If we wanna access more specific child of our database, just use child() method:



To get data from database, we add listener to the reference. When getting the value, we simply add it to list (state variable) and call setState() method.


Calling child(key) will return a reference to object we want to edit, then use set(newValue) method.

Our application won’t know the change. To stay updated, we have to add listener:



Set up Project

Follow the steps above to create, configure Firebase Project and Flutter Project.

Project Structure


Data Model


List of Items Screen


Item Screen


Source Code


By grokonez | August 4, 2018.

Related Posts

Got Something To Say:

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