Firebase Database in Flutter – WeightTracker 3

by Aug 29, 2017Flutter, Weight Tracker20 comments

In this post, I’m going to go through adding Firebase Database to a Flutter application. The presented development is part of my Weight Tracker app (simple app for tracking weight), so the development will be based on that and focused on that purpose.

Let’s get to it!

Setting up Firebase

The first thing we need to do is set up Firebase integration. It is clearly explained in Firebase’s Codelab, so before moving on I would recommend you going through point 5 in order to connect to Firebase.

For this course we are not going to use Authentication, however, the default rules for Firebase Database require users to be authenticated. To change that we will modify database’s rules file to allow anyone to read and write to the database:

After we set everything up, all we need is to add firebase dependency to our flutter project’s pubspec.yaml file

and we are ready to go!

. . .

Pushing data to database

Firebase database plugin is very simple to use. To get main reference of our application all we need to do is get access to static field in FirebaseDatabase class.

If we would like to get into more specific child of our database, we can simply call mainReference.child(“name_of_child”).

To push an object into database we can just call push and set methods on reference object.

However, the set method doesn’t accept just an object. It needs to be a dynamic value already in a json-map format. In order to transform our object to the format we want, I added toJson method:

Now we can call

And we end up with an entry stored in our database.

. . .

Reading data form database

In order to get data from the database, we add a listener to the reference we are interested in (in that case it will be mainReference). Once we get the value, we will simply add it to the state’s list and call setState method.

Side note: I present only getting value from database and adding it to the local list. If you are interested in how to display it, check out my GitHub repository for full code. The link provided at the end of the post.

As you can see, database listener consumes Event object. The actual object we are interested in is in event.snapshot.value. However, it is the same dynamic format we have pushed. In order to parse it to WeightEntry, I added constructor accepting DataSnapshot and then getting specific fields from value. I also added Key to the class, which is the unique value Firebase is creating on push. It will be needed in editing.

. . .

Updating data

Since we added Key to the WeightEntry model, it is very easy to update a value in the database.

Code below shows how to edit value in database once we have the object we want to pass:

Calling child(key) will return a reference to the object we want to edit, then setting new value will make a deal. This action will result in an updated entry in the database, however, our application won’t notice it. In order to stay updated with data edits, we need to add a change listener.

Now on every child changed in mainReference, we update this child in our local listView and call setState.

BONUS: If you want your application to store data in local memory in case of no network connection, this is the way 🙂

End notes

Wiring up Flutter application with Firebase is very easy and straight forward. I strongly encourage everyone to try it out. In the near future, I will go through Firebase Authentication for more complex usage of Firebase (link will be provided). If you are interested in more Flutter-Firebase content, you can see the Codelab I talked about earlier. You can also check out firebase_database plugin itself.

I hope you liked that post, I would be grateful for any feedback so please feel free to leave a comment 🙂

That’s it, folks!

You can find the whole project here. (You need to create own google-services.json to connect to Firebase)

Cheers! 🙂

Marcin Szałek

Founder of Fidev

Flutter enthusiast since Alpha release in 2017. Believes that sharing is caring, which lead him to start a technical blog dedicated fo Flutter in its early days. Loves to see beautiful designs become real apps and is willing to help make it happen. Enjoys sunny beaches far from home.

Join the newsletter!

Join the newsletter to keep track with latest posts and get my special Widget to animate views' entrances without any hassle for FREE!

Check out other posts!

SY Travel UI Challenge

SY Travel UI Challenge

Check out the videos explaining how I implemented awesome SY Expedition Travel animation by Anton Skvortsov! In the following videos I will show you the whole process of creating a UI challenge in Flutter.

Thanos Snap Effect in Flutter

Thanos Snap Effect in Flutter

Have you ever woken up and thought “How awesome would it be to create Thanos snap effect in Flutter”? Probably not. Well… following Google’s Easter Egg I did. 🙂 And I’ve found out that no one did it in Flutter yet so why not give it a try! In this post, I will explain how I created a Thanos snap effect coming from Avengers: Infinity War movie. Enjoy 🙂

Advanced transitions – UI Tickets Challenge

Advanced transitions – UI Tickets Challenge

As developers, we have always get into situations where the designers require some fancy transitions which look awesome on the design but are extremely difficult to implement. Being Flutter developer makes it different, makes it fun because we have tools to do it! To prove it in this post, I will continue implementing awesome Buy Tickets design by Dldp and add bottom sheet transitions!

Share This

Share This

Share this post with your friends!