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

Build: Separated List Screen

This screen shows a scrollable list of items with a separator line between each item.

Target UI

-------------------------
| Item 1               |
-------------------------
| Item 2               |
-------------------------
| Item 3               |
-------------------------
| Item 4               |
-------------------------
| Item 5               |
-------------------------

Use ListView.separated to display a list of 5 items labeled 'Item 1' to 'Item 5'.

Add a thin grey divider line between each item.

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

The list should be scrollable if the screen is small.

Starter Code

Flutter

import 'package:flutter/material.dart';

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

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class SeparatedListScreen extends StatelessWidget {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Separated List'),
      ),
      body: ListView.separated(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
          );
        },
        separatorBuilder: (context, index) {
          return Divider(color: Colors.grey, thickness: 1);
        },
      ),
    );
  }
}

We created a list of 5 strings named items. The ListView.separated widget builds each list item using itemBuilder, which returns a ListTile with the item text. The separatorBuilder returns a Divider widget that draws a thin grey line between items. This makes the list easy to read and visually separated. The list scrolls if the screen is small.

Final Result

Completed Screen

-------------------------
| Item 1               |
-------------------------
| Item 2               |
-------------------------
| Item 3               |
-------------------------
| Item 4               |
-------------------------
| Item 5               |
-------------------------

User can scroll up and down to see all items if screen height is small.

Each item is tappable (default ListTile behavior, but no action assigned).

Stretch Goal

Add a tap action that shows a SnackBar with the tapped item's name.

💡 Hint

Wrap ListTile with InkWell or use ListTile's onTap property to show SnackBar using ScaffoldMessenger.