GridView.builder in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a GridView with 4 columns.

Flutter

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: [1]),
  itemCount: 8,
  itemBuilder: (context, index) {
    return Container(color: Colors.blue);
  },
)

Drag options to blanks, or click blank then click option'

A2

B5

C3

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong number for columns.

Confusing rows with columns.

The crossAxisCount property sets the number of columns in the grid. Here, 4 columns are needed.

2fill in blank

medium

Complete the code to set the number of items in the grid to 10.

Flutter

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemCount: [1],
  itemBuilder: (context, index) {
    return Container(color: Colors.red);
  },
)

Drag options to blanks, or click blank then click option'

A10

B5

C15

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Setting itemCount to a wrong number.

Forgetting to set itemCount.

The itemCount property sets how many items the grid will show. Here, it should be 10.

3fill in blank

hard

Fix the error in the code by completing the missing property to create a grid with fixed cross axis count.

Flutter

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount([1]: 2),
  itemCount: 6,
  itemBuilder: (context, index) {
    return Container(color: Colors.green);
  },
)

Drag options to blanks, or click blank then click option'

AcrossAxisCount

BcrossAxisSpacing

CmainAxisCount

DchildAspectRatio

Attempts:

3 left

💡 Hint

Common Mistakes

Using mainAxisCount which does not exist.

Confusing spacing properties with count.

The property crossAxisCount defines how many columns the grid has. This is required for SliverGridDelegateWithFixedCrossAxisCount.

4fill in blank

hard

Fill both blanks to create a grid with 3 columns and spacing of 10 pixels between items.

Flutter

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: [1],
    crossAxisSpacing: [2],
  ),
  itemCount: 9,
  itemBuilder: (context, index) {
    return Container(color: Colors.orange);
  },
)

Drag options to blanks, or click blank then click option'

A3

B5

C10

D15

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up spacing and count values.

Using too large spacing values.

crossAxisCount sets the number of columns, here 3. crossAxisSpacing sets the space between columns, here 10 pixels.

5fill in blank

hard

Fill all three blanks to create a grid where keys are uppercase strings, values are colors, and only items with index greater than 3 are included.

Flutter

final Map<String, Color> colorMap = {
  for (var i = 0; i < 7; i++)
    if (i [3] 3) [1]: [2],
};

Drag options to blanks, or click blank then click option'

Ai.toString().toUpperCase()

BColors.blue

C>

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase keys instead of uppercase.

Using wrong comparison operators.

Using wrong color values.

The key is the uppercase string of the index: i.toString().toUpperCase(). The value is a color, here Colors.blue. The condition filters items with index greater than 3 using >.

Practice

1. What is the main purpose of GridView.builder in Flutter?

easy

A. To create a grid with static images only

B. To create a fixed grid with all items built at once

C. To create a list view with fixed height items

D. To create a scrollable grid that builds items only when needed

Solution

1. Step 1: Understand GridView.builder behavior

   GridView.builder builds grid items lazily, meaning it creates items only when they scroll into view.

2. Step 2: Compare with other grid types

   Other grid types like GridView.count build all items at once, which is less efficient for large lists.

3. Final Answer:

   To create a scrollable grid that builds items only when needed -> Option D

4. Quick Check:

   GridView.builder = lazy building [OK]

Hint: Remember builder means items build on demand [OK]

Common Mistakes:

• Confusing GridView.builder with GridView.count
• Thinking it builds all items at once
• Assuming it only works with fixed item counts

2. Which of the following is the correct way to specify the number of columns in GridView.builder?

easy

A. gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3)

B. columns: 3

C. crossAxisCount: 3

D. gridColumns: 3

Solution

1. Step 1: Identify gridDelegate usage

   GridView.builder requires a gridDelegate to control layout, such as SliverGridDelegateWithFixedCrossAxisCount.

2. Step 2: Check correct property for columns

   The crossAxisCount property inside SliverGridDelegateWithFixedCrossAxisCount sets the number of columns.

3. Final Answer:

   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3) -> Option A

4. Quick Check:

   Columns set via gridDelegate.crossAxisCount [OK]

Hint: Use gridDelegate with crossAxisCount for columns [OK]

Common Mistakes:

• Trying to set columns directly on GridView.builder
• Using invalid property names like columns or gridColumns
• Omitting gridDelegate entirely

3. What will be the output of this Flutter code snippet?

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemCount: 4,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
)

medium

A. A grid with 2 columns and 4 items labeled Item 0 to Item 3

B. A list with 4 items labeled Item 0 to Item 3

C. A grid with 4 columns and 2 items labeled Item 0 to Item 1

D. An error because itemBuilder returns Text widgets

Solution

1. Step 1: Analyze gridDelegate and itemCount

   The gridDelegate sets 2 columns, and itemCount is 4, so 4 items will be arranged in 2 columns.

2. Step 2: Understand itemBuilder output

   Each itemBuilder call returns a Text widget labeled with the index, from 0 to 3.

3. Final Answer:

   A grid with 2 columns and 4 items labeled Item 0 to Item 3 -> Option A

4. Quick Check:

   2 columns, 4 items, Text widgets labeled [OK]

Hint: Check crossAxisCount and itemCount carefully [OK]

Common Mistakes:

• Confusing columns with itemCount
• Thinking itemBuilder cannot return Text widgets
• Assuming a list instead of a grid

4. Identify the error in this GridView.builder code:

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemBuilder: (context, index) {
    return Container(color: Colors.blue);
  },
)

medium

A. itemBuilder returns Container instead of Text

B. Missing itemCount property causing infinite items

C. gridDelegate is incorrectly defined

D. crossAxisCount cannot be 3

Solution

1. Step 1: Check required properties of GridView.builder

   GridView.builder requires an itemCount to limit the number of items; without it, it builds infinite items.

2. Step 2: Verify other properties

   gridDelegate and itemBuilder are correctly defined; returning Container is valid.

3. Final Answer:

   Missing itemCount property causing infinite items -> Option B

4. Quick Check:

   itemCount missing = infinite build [OK]

Hint: Always include itemCount to avoid infinite items [OK]

Common Mistakes:

• Forgetting itemCount in GridView.builder
• Thinking itemBuilder must return Text only
• Misunderstanding crossAxisCount limits

5. You want to create a grid that shows only even numbers from 0 to 10 using GridView.builder. Which code snippet correctly implements this?

hard

A. GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: 5,
itemBuilder: (context, index) {
return Text('Number $index');
},
)

B. GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: 11,
itemBuilder: (context, index) {
if (index % 2 == 0) return Text('Number $index');
else return Container();
},
)

C. GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: 6,
itemBuilder: (context, index) {
return Text('Number ${index * 2}');
},
)

D. GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: 6,
itemBuilder: (context, index) {
return Text('Number $index');
},
)

Solution

1. Step 1: Determine how many even numbers from 0 to 10

   Even numbers are 0, 2, 4, 6, 8, 10 -- total 6 numbers.

2. Step 2: Check itemCount and itemBuilder logic

   GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2), itemCount: 6, itemBuilder: (context, index) { return Text('Number ${index * 2}'); }, ) uses itemCount 6 and multiplies index by 2 to get even numbers correctly.

3. Step 3: Analyze other options

   GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2), itemCount: 11, itemBuilder: (context, index) { if (index % 2 == 0) return Text('Number $index'); else return Container(); }, ) creates empty containers for odd indexes, wasting space. The other options do not correctly generate even numbers.

4. Final Answer:

   GridView.builder with itemCount: 6 and Text('Number ${index * 2}') -> Option C

5. Quick Check:

   Use index * 2 with correct itemCount [OK]

Hint: Multiply index by 2 to get even numbers [OK]

Common Mistakes:

• Using itemCount 11 and skipping odd items wastes space
• Not adjusting index to generate even numbers
• Returning empty containers for unwanted items