ListView basics in Flutter - Mini App: Build & Ship

Build: Simple ListView Screen

This screen shows a vertical scrollable list of items with simple text labels.

Target UI

--------------------
| Simple ListView   |
|------------------|
| Item 1           |
| Item 2           |
| Item 3           |
| Item 4           |
| Item 5           |
| ...              |
--------------------

Use a ListView widget to display a vertical list.

Display at least 10 items labeled 'Item 1' to 'Item 10'.

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

The list should be scrollable if items overflow the screen.

Starter Code

Flutter

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SimpleListViewScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple ListView'),
      ),
      body: // TODO: Add ListView here
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SimpleListViewScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple ListView'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item ${index + 1}'),
          );
        },
      ),
    );
  }
}

We use ListView.builder to create a scrollable list of 10 items. The itemBuilder function creates each ListTile with a title showing the item number. This approach is efficient because it builds only visible items on demand. The list scrolls vertically if items do not fit on the screen.

Final Result

Completed Screen

--------------------
| Simple ListView   |
|------------------|
| Item 1           |
| Item 2           |
| Item 3           |
| Item 4           |
| Item 5           |
| Item 6           |
| Item 7           |
| Item 8           |
| Item 9           |
| Item 10          |
--------------------

User can scroll vertically to see all 10 items.

Each item is tappable but no action is assigned.

Stretch Goal

Add a floating action button that shows a SnackBar with the message 'FAB pressed' when tapped.

💡 Hint

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