Realtime Database in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize the Firebase Realtime Database instance.

Flutter

final database = FirebaseDatabase.instance[1];

Drag options to blanks, or click blank then click option'

A.initialize()

B.connect()

C.start()

D.ref()

Attempts:

3 left

💡 Hint

Common Mistakes

Using .initialize() instead of .ref()

Trying to call .connect() which does not exist

The FirebaseDatabase.instance.ref() method gets a reference to the root of the database.

2fill in blank

medium

Complete the code to write data to the 'users' node in the database.

Flutter

database.ref('users').[1]({'name': 'Alice', 'age': 25});

Drag options to blanks, or click blank then click option'

Aget

Bupdate

Cset

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' which reads data instead of writing

Using 'remove' which deletes data

The set method writes data to the specified database reference, replacing any existing data.

3fill in blank

hard

Fix the error in the code to listen for realtime updates on the 'messages' node.

Flutter

database.ref('messages').on[1]((event) {
  final data = event.snapshot.value;
  print(data);
});

Drag options to blanks, or click blank then click option'

Avalue

Bchange

Cupdate

Dchild_added

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onChange' which is not a valid event

Using 'onChildAdded' which listens only for new child nodes

The onValue event listens for any changes to the data at the reference and returns the snapshot.

4fill in blank

hard

Fill both blanks to update the 'status' field to 'online' for user with id 'user123'.

Flutter

database.ref('users/[1]').[2]({'status': 'online'});

Drag options to blanks, or click blank then click option'

Auser123

Bset

Cupdate

DuserId

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' which overwrites all data at the path

Using a variable name instead of the actual user ID string

Use the user ID 'user123' as the child path and update to change only the 'status' field without overwriting other data.

5fill in blank

hard

Fill all three blanks to remove the 'age' field from user 'user456'.

Flutter

database.ref('users/[1]').[2]({'[3]': null});

Drag options to blanks, or click blank then click option'

Auser456

Bupdate

Cage

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' which overwrites all data

Trying to remove the field by deleting the whole user node

To remove a field, update it with null. Use the user ID 'user456' and the update method to remove only the 'age' field.

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