#Lecture 005 — Dashboard: Show & Delete Records

A list that updates by itself when the box changes — no setState, no manual refresh. ValueListenableBuilder listens to the box and rebuilds when a record is added, changed or deleted.

Contents

Prerequisites · Connection · Objectives · Lesson · Code Examples · Common Mistakes · Best Practices · Mini Challenge · Practice Questions · Answers · Takeaways

#Prerequisites

Lectures 001–004 and ListView.builder / ListTile (Essential Widgets 007).

#Connection With Previous Lectures

The manager can save and delete, but nothing shows the data yet. The dashboard is the home screen: a list of all records, a + button, and a delete icon on every row.

#Learning Objectives

• Build the dashboard Scaffold with a FloatingActionButton
• Use box.listenable() with ValueListenableBuilder
• Show an empty-state message
• Delete a record from a list row

#1. The Screen Skeleton

// lib/screen_dashboard.dart
import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';

import 'data_hive/data_objects.dart';
import 'data_hive/general_box.dart';
import 'screen_add_update_record.dart';

class ScreenDashboard extends StatelessWidget {
  const ScreenDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dashboard')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => const ScreenAddUpdateRecord()),
          );
        },
        child: const Icon(Icons.add),
      ),
      body: ValueListenableBuilder(
        valueListenable: GeneralBox.getBox().listenable(),
        builder: (context, Box<DataObjects> box, _) {
          if (box.values.isEmpty) {
            return const Center(child: Text('No data found'));
          }
          final values = box.values.toList();

          return ListView.builder(
            itemCount: values.length,
            itemBuilder: (context, index) {
              final item = values[index];
              return ListTile(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => ScreenAddUpdateRecord(item: item),
                    ),
                  );
                },
                title: Text(item.name),
                subtitle: Text(item.address),
                trailing: IconButton(
                  icon: const Icon(Icons.delete),
                  onPressed: () => GeneralBox.delete(item.key),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

The screen is a StatelessWidget — the box holds the state, not the widget.

#2. How ValueListenableBuilder Works

box.listenable() (from hive_flutter) is a ValueListenable: it notifies every time the box changes. ValueListenableBuilder rebuilds only its builder each time. Delete a row → the box changes → the list rebuilds. No setState.

#3. Empty State

When box.values.isEmpty we show No data found instead of an empty white screen.

#4. Tapping and Deleting

• onTap opens the form with the record — update mode (Lecture 006).
• The trailing icon calls GeneralBox.delete(item.key). That key is why we stored key in the model.

#5. The Missing Screen

The file imports screen_add_update_record.dart. Create a placeholder so the app compiles:

// lib/screen_add_update_record.dart (temporary)
import 'package:flutter/material.dart';
import 'data_hive/data_objects.dart';

class ScreenAddUpdateRecord extends StatelessWidget {
  final DataObjects? item;
  const ScreenAddUpdateRecord({super.key, this.item});

  @override
  Widget build(BuildContext context) =>
      const Scaffold(body: Center(child: Text('Form comes next')));
}

#Code Examples

#Example 1 — Test the Delete Without a Form

Temporarily add two records in main after GeneralBox.init():

if (GeneralBox.getBox().isEmpty) {
  for (final name in ['Ali', 'Sara']) {
    GeneralBox.addUpdate(
      DataObjects()
        ..key = GeneralBox.getUniqueKey() + name
        ..name = name
        ..address = 'Karachi',
    );
  }
}

Run, tap the delete icons, and restart: deleted rows stay gone. Remove the seed code afterwards.

#Common Beginner Mistakes

1. Using setState after delete — unnecessary; the builder already rebuilds.

2. listenable() without importing hive_flutter — the method is an extension in that package; the plain hive import lacks it.

3. Forgetting the typed builder parameter — Box<DataObjects> box keeps box.values typed.

#Best Practices

• Keep the rebuilding region small: wrap only the list, not the whole Scaffold.
• Always provide an empty state.
• Use IconButton (bigger tap area) for the delete icon.

#Mini Challenge

Show the number of records in the AppBar title: Dashboard (3). Where must the count be read so it updates automatically?

#Practice Questions

1. What does listenable() return? 2. Why no setState? 3. Where does the delete key come from? 4. What does the empty state prevent?

#Practice Answers

1. A ValueListenable<Box> that notifies when the box changes.
2. ValueListenableBuilder rebuilds on every change.
3. The key field stored in each record.
4. A blank screen that looks broken.

(Challenge: put the AppBar inside the builder, or use a second ValueListenableBuilder.)

#Key Takeaways

• ValueListenableBuilder + box.listenable() = a live list.
• Delete with the key saved in the record.
• Show an empty-state message.