Why lists display dynamic data in Flutter

Introduction

Lists show changing data because they update when the data changes. This helps apps show fresh information without restarting.

Showing messages in a chat app that update as new messages arrive.

Displaying a list of products that can change when new items are added.

Showing a feed of posts that updates when users add new posts.

Displaying notifications that appear and disappear dynamically.

Showing search results that update as the user types.

Syntax

Flutter

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

ListView.builder creates list items only when needed, which is efficient for long lists.

The itemCount tells how many items to show, and itemBuilder builds each item.

Examples

Shows a list of messages that updates when messages changes.

Flutter

ListView.builder(
  itemCount: messages.length,
  itemBuilder: (context, index) {
    return Text(messages[index]);
  },
)

Handles the case when the list is empty by showing no items.

Flutter

ListView.builder(
  itemCount: 0,
  itemBuilder: (context, index) {
    return Text('No items');
  },
)

Displays a list of products with name and price, updating as products change.

Flutter

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(products[index].name),
      subtitle: Text('$${products[index].price}'),
    );
  },
)

Sample App

This app shows a list of fruits. When you tap the + button, it adds a new item to the list. The list updates automatically to show the new item.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<String> items = ['Apple', 'Banana', 'Cherry'];

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Dynamic List Example')),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: addItem,
          child: const Icon(Icons.add),
          tooltip: 'Add Item',
        ),
      ),
    );
  }
}

Important Notes

Updating the list inside setState() tells Flutter to redraw the list with new data.

Using ListView.builder is efficient because it builds only visible items.

Common mistake: forgetting to call setState() after changing the list, so UI does not update.

Summary

Lists show dynamic data by rebuilding when the data changes.

ListView.builder is the best way to display changing lists efficiently.

Always update the list inside setState() to refresh the UI.