ListView basics in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a ListView in Flutter?

A ListView is a scrollable list of widgets arranged linearly. It allows users to scroll through a list of items vertically or horizontally.

beginner

How do you create a simple vertical ListView with fixed children?

Use ListView(children: [Widget1, Widget2, ...]) to create a scrollable list with a fixed set of widgets.

intermediate

What is the difference between ListView and ListView.builder?

ListView takes a fixed list of children, while ListView.builder creates children on demand, which is efficient for long or infinite lists.

intermediate

Why should you use ListView.builder for large lists?

Because it builds only the visible items plus a few extra, saving memory and improving performance compared to building all items at once.

beginner

How can you make a ListView scroll horizontally?

Set the scrollDirection property to Axis.horizontal in the ListView constructor.

Which widget creates a scrollable list that builds its children lazily?

A ListView.builder

B ListView

C Column

D Row

ListView.builder builds children on demand, which is efficient for long lists.

How do you make a ListView scroll horizontally?

A Use <code>ListView.vertical()</code>

B Wrap it in a <code>Row</code>

C Set <code>scrollDirection: Axis.horizontal</code>

D Set <code>direction: horizontal</code>

The scrollDirection property controls the scroll axis.

What happens if you use ListView with many children without builder?

A All children are built at once, which may cause performance issues

B Children are built lazily

C The list scrolls horizontally by default

D The list will not scroll

ListView with fixed children builds all widgets immediately.

Which property do you use to provide the list of widgets in a simple ListView?

A widgets

B children

C elements

D items

The children property takes a list of widgets.

What is the default scroll direction of a ListView?

A None

B Horizontal

C Diagonal

D Vertical

By default, ListView scrolls vertically.

Explain how to create a scrollable vertical list of text items in Flutter using ListView.

Think about how you put multiple widgets inside a scrollable container.

Describe the benefits of using ListView.builder over a simple ListView with many children.

Consider what happens when you have a very long list.

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