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 >.