Realtime Database in Flutter

Introduction

A Realtime Database lets your app save and get data instantly. It keeps your app updated with changes right away, like chatting with friends or live scores.

You want to build a chat app where messages appear instantly.

You need to show live sports scores that update without refreshing.

You want to sync user settings across devices in real time.

You are making a collaborative to-do list app where everyone sees updates immediately.

You want to track delivery status live in a shopping app.

Syntax

Flutter

final database = FirebaseDatabase.instance.ref('path/to/data');
database.onValue.listen((event) {
  final data = event.snapshot.value;
  // Use data here
});
database.set({'key': 'value'});

FirebaseDatabase.instance.ref('path') gets a reference to a location in the database.

onValue.listen listens for any changes at that location in real time.

Examples

This listens to all changes under 'messages' and prints new data instantly.

Flutter

final ref = FirebaseDatabase.instance.ref('messages');
ref.onValue.listen((event) {
  print(event.snapshot.value);
});

This saves user data at 'users/user1' path.

Flutter

final ref = FirebaseDatabase.instance.ref('users/user1');
ref.set({'name': 'Alice', 'age': 25});

This listens to a number value and prints it whenever it changes.

Flutter

final ref = FirebaseDatabase.instance.ref('counter');
ref.onValue.listen((event) {
  final count = event.snapshot.value as int? ?? 0;
  print('Count is $count');
});

Sample App

This app shows a number from the Realtime Database. When you press the button, it adds 1 and updates the number everywhere instantly.

Flutter

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_database/firebase_database.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final DatabaseReference _counterRef = FirebaseDatabase.instance.ref('counter');
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    _counterRef.onValue.listen((event) {
      final int newCount = (event.snapshot.value as int?) ?? 0;
      setState(() {
        _counter = newCount;
      });
    });
  }

  void _incrementCounter() {
    _counterRef.set(_counter + 1);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Realtime Counter')),
        body: Center(
          child: Text('Count: $_counter', style: TextStyle(fontSize: 32)),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          child: Icon(Icons.add),
          tooltip: 'Increment counter',
        ),
      ),
    );
  }
}

Important Notes

Always initialize Firebase before using Realtime Database.

Use onValue.listen to get live updates automatically.

Remember to handle null or missing data safely.

Summary

Realtime Database keeps your app data synced instantly.

Use database references to read and write data.

Listen to onValue stream to get live updates.

Practice

1. What is the main purpose of Firebase Realtime Database in a Flutter app?

easy

A. To compile Flutter code into native apps

B. To store images locally on the device

C. To handle user interface animations

D. To keep app data synced instantly across devices

Solution

1. Step 1: Understand Realtime Database role

   Firebase Realtime Database is designed to sync data instantly between clients and server.

2. Step 2: Compare options with purpose

   Only To keep app data synced instantly across devices describes syncing data instantly, which matches the database's main use.

3. Final Answer:

   To keep app data synced instantly across devices -> Option D

4. Quick Check:

   Realtime Database = instant data sync [OK]

Hint: Realtime Database syncs data live, not UI or local files [OK]

Common Mistakes:

• Confusing database with UI or local storage
• Thinking it compiles code
• Assuming it stores images locally

2. Which of the following is the correct way to get a reference to a Firebase Realtime Database node named 'users' in Flutter?

easy

A. FirebaseDatabase.getReference('users')

B. FirebaseDatabase.instance.ref('users')

C. FirebaseDatabase.instance.child('users')

D. FirebaseDatabase.ref('users')

Solution

1. Step 1: Recall correct method to get database reference

   The official Flutter Firebase API uses FirebaseDatabase.instance.ref(path) to get a reference.

2. Step 2: Check each option syntax

   FirebaseDatabase.instance.ref('users') uses the correct instance and method. Others are incorrect or outdated.

3. Final Answer:

   FirebaseDatabase.instance.ref('users') -> Option B

4. Quick Check:

   Use instance.ref('path') for database reference [OK]

Hint: Use FirebaseDatabase.instance.ref('node') to get reference [OK]

Common Mistakes:

• Omitting .instance before .ref()
• Using .child() directly on FirebaseDatabase
• Using non-existent getReference() method

3. Given the following Flutter code snippet, what will be printed when the database value changes to {'name': 'Alice'}?

final ref = FirebaseDatabase.instance.ref('profile');
ref.onValue.listen((event) {
  final data = event.snapshot.value as Map?;
  print(data?['name']);
});

medium

A. Error: type cast failed

B. null

C. Alice

D. profile

Solution

1. Step 1: Understand onValue listener behavior

   The listener triggers on data change and provides a snapshot with the new value.

2. Step 2: Analyze code inside listener

   The snapshot value is cast to a Map and then accesses the 'name' key, which is 'Alice'.

3. Final Answer:

   Alice -> Option C

4. Quick Check:

   onValue prints updated 'name' = Alice [OK]

Hint: onValue gives snapshot; access data keys safely [OK]

Common Mistakes:

• Ignoring null safety and casting
• Expecting entire snapshot instead of value
• Confusing key names or data types

4. Identify the error in this Flutter code that listens to Realtime Database changes:

final ref = FirebaseDatabase.instance.ref('messages');
ref.onValue.listen((event) {
  final data = event.snapshot.value as Map;
  print(data['text']);
});

medium

A. Casting snapshot.value to Map may cause runtime error

B. Missing await keyword before listen

C. ref.onValue should be ref.value

D. print statement syntax is incorrect

Solution

1. Step 1: Check type casting of snapshot.value

   snapshot.value can be null or Map, so casting directly to Map risks runtime error.

2. Step 2: Verify other code parts

   listen is a Stream subscription, no await needed; onValue is correct; print syntax is valid.

3. Final Answer:

   Casting snapshot.value to Map may cause runtime error -> Option A

4. Quick Check:

   Unsafe cast causes runtime error [OK]

Hint: Use Map or null check before casting [OK]

Common Mistakes:

• Casting without null safety
• Misusing async/await with listen
• Confusing onValue with value property

5. You want to display a live list of chat messages from Firebase Realtime Database in Flutter. Which approach correctly listens and updates the UI when data changes?

hard

A. Use a StreamBuilder with FirebaseDatabase.instance.ref('chats').onValue and update UI from snapshot

B. Call FirebaseDatabase.instance.ref('chats').get() once and build UI with that data

C. Use a FutureBuilder with FirebaseDatabase.instance.ref('chats').once() to get data

D. Use setState inside a timer to fetch data every 5 seconds

Solution

1. Step 1: Understand live data update needs

   To keep UI updated live, use a stream that listens to data changes.

2. Step 2: Match Flutter widget to stream

   StreamBuilder listens to onValue stream and rebuilds UI on changes, perfect for live updates.

3. Step 3: Evaluate other options

   get() and once() fetch data once, not live; timer with setState is inefficient and not real-time.

4. Final Answer:

   Use a StreamBuilder with FirebaseDatabase.instance.ref('chats').onValue and update UI from snapshot -> Option A

5. Quick Check:

   StreamBuilder + onValue = live UI updates [OK]

Hint: Use StreamBuilder with onValue for live database updates [OK]

Common Mistakes:

• Using get() or once() for live data
• Polling with timers instead of streams
• Using FutureBuilder for continuous updates