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.

Practice

1. What is the main purpose of a ListView in Flutter?

easy

A. To create a fixed grid layout

B. To display a scrollable list of widgets

C. To handle user input forms

D. To manage app navigation

Solution

1. Step 1: Understand ListView's role

   ListView is designed to show multiple widgets in a scrollable list.

2. Step 2: Compare with other widgets

   Grid layouts or navigation are handled by other widgets, not ListView.

3. Final Answer:

   To display a scrollable list of widgets -> Option B

4. Quick Check:

   ListView = scrollable list [OK]

Hint: ListView always scrolls vertically by default [OK]

Common Mistakes:

• Confusing ListView with GridView
• Thinking ListView manages navigation
• Assuming ListView is for fixed layouts

2. Which of the following is the correct way to create a ListView with three Text widgets as children?

easy

A. ListView(children: Text('One'), Text('Two'), Text('Three'))

B. ListView(items: [Text('One'), Text('Two'), Text('Three')])

C. ListView(list: [Text('One'), Text('Two'), Text('Three')])

D. ListView(children: [Text('One'), Text('Two'), Text('Three')])

Solution

1. Step 1: Identify correct property for children

   The ListView uses the children property to accept a list of widgets.

2. Step 2: Check syntax correctness

   ListView(children: [Text('One'), Text('Two'), Text('Three')]) correctly uses children: [ ... ] with a list of Text widgets.

3. Final Answer:

   ListView(children: [Text('One'), Text('Two'), Text('Three')]) -> Option D

4. Quick Check:

   Use children property with a list [OK]

Hint: Use children: [widget1, widget2] for ListView items [OK]

Common Mistakes:

• Using wrong property like items or list
• Not wrapping widgets in a list
• Passing widgets without brackets

3. What will be the visible output when running this Flutter code?

ListView(
  children: [
    Text('Apple'),
    Text('Banana'),
    Text('Cherry')
  ],
)

medium

A. Only the first Text widget 'Apple' is shown

B. A horizontal scrollable list showing Apple, Banana, Cherry

C. A vertical scrollable list showing Apple, Banana, Cherry

D. An error because ListView needs a scrollDirection

Solution

1. Step 1: Understand default scroll direction

   ListView scrolls vertically by default, so children appear stacked vertically.

2. Step 2: Check children widgets

   Three Text widgets will appear in order: Apple, Banana, Cherry.

3. Final Answer:

   A vertical scrollable list showing Apple, Banana, Cherry -> Option C

4. Quick Check:

   Default scrollDirection = vertical [OK]

Hint: ListView scrolls vertically unless scrollDirection changes [OK]

Common Mistakes:

• Assuming horizontal scroll by default
• Thinking scrollDirection is required
• Expecting only one child visible

4. Identify the error in this ListView code snippet:

ListView(
  children: Text('Hello'),
)

medium

A. children expects a list of widgets, not a single widget

B. Text widget cannot be used inside ListView

C. ListView requires a scrollDirection property

D. Missing a comma after Text widget

Solution

1. Step 1: Check children property type

   The children property requires a list of widgets, e.g., [Text('Hello')].

2. Step 2: Identify the mistake

   Passing a single widget without brackets causes a type error.

3. Final Answer:

   children expects a list of widgets, not a single widget -> Option A

4. Quick Check:

   children = list of widgets [OK]

Hint: Always wrap children widgets in square brackets [OK]

Common Mistakes:

• Passing single widget without list brackets
• Forgetting children needs a list
• Adding unnecessary properties

5. You want to display a list of 100 numbers efficiently using ListView. Which approach is best?

hard

A. Use ListView.builder with itemCount and itemBuilder

B. Use ListView with 100 children widgets listed manually

C. Use a Column with 100 Text widgets inside a SingleChildScrollView

D. Use ListView without children or builder

Solution

1. Step 1: Understand performance with many items

   Manually listing 100 widgets wastes memory and slows app.

2. Step 2: Use ListView.builder for efficiency

   ListView.builder creates widgets on demand, improving performance.

3. Final Answer:

   Use ListView.builder with itemCount and itemBuilder -> Option A

4. Quick Check:

   ListView.builder = efficient large lists [OK]

Hint: Use ListView.builder for long or infinite lists [OK]

Common Mistakes:

• Listing all items manually in children
• Using Column for large scrollable lists
• Not specifying itemCount in builder