Why lists display dynamic data in Flutter - Build It to Prove It

Build: Dynamic List Screen

This screen shows a list that updates automatically when new items are added. It helps understand how lists can display changing data in Flutter.

Target UI

-------------------------
| Dynamic List Screen    |
-------------------------
| + Add Item             |
|-----------------------|
| Item 1                |
| Item 2                |
| Item 3                |
|                       |
|                       |
-------------------------

Display a list of text items that can grow dynamically.

Add a button labeled '+ Add Item' at the top.

When the button is tapped, add a new item to the list with the next number.

The list should update immediately to show the new item.

Use a StatefulWidget to manage the list data.

Starter Code

Flutter

import 'package:flutter/material.dart';

class DynamicListScreen extends StatefulWidget {
  @override
  State<DynamicListScreen> createState() => _DynamicListScreenState();
}

class _DynamicListScreenState extends State<DynamicListScreen> {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic List Screen'),
        actions: [
          // TODO: Add button here
        ],
      ),
      body: ListView(
        children: [
          // TODO: Display list items here
        ],
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class DynamicListScreen extends StatefulWidget {
  @override
  State<DynamicListScreen> createState() => _DynamicListScreenState();
}

class _DynamicListScreenState extends State<DynamicListScreen> {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  void _addItem() {
    setState(() {
      items.add('Item ${items.length + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic List Screen'),
        actions: [
          IconButton(
            icon: Icon(Icons.add),
            onPressed: _addItem,
            tooltip: 'Add Item',
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
          );
        },
      ),
    );
  }
}

This solution uses a StatefulWidget to keep track of the list of items. The list starts with three items.

The _addItem method adds a new item with the next number to the list and calls setState to tell Flutter to update the screen.

The list is displayed using ListView.builder, which efficiently creates list tiles for each item in the list.

When the '+' button in the app bar is tapped, the list grows and the new item appears immediately. This shows how lists can display dynamic data that changes over time.

Final Result

Completed Screen

-------------------------
| Dynamic List Screen    |
| [+]                   |
-------------------------
| Item 1                |
| Item 2                |
| Item 3                |
| Item 4                |
|                       |
|                       |
-------------------------

User taps the '+' button in the top right corner.

A new item labeled 'Item 4' is added to the bottom of the list.

The list updates immediately to show the new item.

Each tap adds the next numbered item to the list.

Stretch Goal

Add a feature to remove the last item from the list with a '-' button next to the '+' button.

💡 Hint

Add another IconButton with Icons.remove in the AppBar actions. Use setState to remove the last item if the list is not empty.