ListView.builder in Flutter - Mini App: Build & Ship

Build: Simple List Screen

This screen shows a scrollable list of 20 items using ListView.builder. Each item displays its number.

Target UI

-------------------------
| Simple List Screen     |
-------------------------
| Item 1                |
|-----------------------|
| Item 2                |
|-----------------------|
| Item 3                |
| ...                   |
|-----------------------|
| Item 20               |
-------------------------

Use ListView.builder to create a scrollable list.

Display 20 items labeled 'Item 1' to 'Item 20'.

Each item should be a ListTile with the item label as title.

Starter Code

Flutter

import 'package:flutter/material.dart';

class SimpleListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple List Screen'),
      ),
      body: // TODO: Add ListView.builder here
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class SimpleListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple List Screen'),
      ),
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item ${index + 1}'),
          );
        },
      ),
    );
  }
}

We use ListView.builder because it efficiently creates list items only when they are visible on screen. We set itemCount to 20 to show 20 items. The itemBuilder function creates each ListTile with a title showing the item number. This approach is memory-friendly and good for long lists.

Final Result

Completed Screen

-------------------------
| Simple List Screen     |
-------------------------
| Item 1                |
|-----------------------|
| Item 2                |
|-----------------------|
| Item 3                |
| ...                   |
|-----------------------|
| Item 20               |
-------------------------

User can scroll vertically to see all 20 items.

Each item is tappable (default ListTile behavior).

Stretch Goal

Add a FloatingActionButton that shows a SnackBar saying 'You tapped the button!' when pressed.

💡 Hint

Use ScaffoldMessenger.of(context).showSnackBar inside the FloatingActionButton's onPressed.