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:

flutter-firebase-database-example-overview

Firebase Console for Realtime Database will be like:

flutter-firebase-database-example-database-results

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:

integrate-flutter-firebase-example-configure-android-enter-database

In Realtime Database, set the Rules:

flutter-firebase-database-example-configure-database-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:

Create

Read

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.

Update

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:

Delete

Practice

Set up Project

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

Project Structure

flutter-firebase-database-example-project-structure

Data Model

lib/model/note.dart

UI
List of Items Screen

lib/ui/listview_note.dart

Item Screen

lib/ui/note_screen.dart

Source Code

flutter_firebase_database

By grokonez | August 4, 2018.



Related Posts


7 thoughts on “Flutter Firebase Database example – Firebase Database CRUD with ListView”

  1. Hi mate,
    Can I ask you one thing more?
    How can I filter the results? Where I do the query? when creating the item list?
    Do you have an example?
    Thanks in advance!

Got Something To Say:

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

*