GridView.builder in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this GridView.builder code?

Consider this Flutter code snippet that builds a grid of colored squares. What will you see on the screen?

Flutter

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemCount: 6,
  itemBuilder: (context, index) {
    return Container(
      color: index % 2 == 0 ? Colors.red : Colors.blue,
      margin: EdgeInsets.all(4),
    );
  },
)

A A single column list of 6 red squares.

B A grid with 2 columns and 3 rows, all squares red.

C A grid with 3 columns and 2 rows, alternating red and blue squares starting with red.

D A grid with 3 columns and 2 rows, all squares blue.

💡 Hint

Look at the crossAxisCount and the color condition using index % 2 == 0.

The crossAxisCount: 3 means 3 columns. With 6 items, it forms 2 rows. The color alternates red for even indexes and blue for odd indexes, starting with red at index 0.

❓ lifecycle

intermediate

When does the itemBuilder function get called in GridView.builder?

In Flutter's GridView.builder, when is the itemBuilder function called?

A Every time an item scrolls into view, to build that item widget lazily.

B After the grid is fully rendered, to update all items.

C Only for the first visible row of items.

D Only once for all items when the grid is first built.

💡 Hint

Think about how Flutter optimizes building large lists or grids.

GridView.builder builds items lazily. It calls itemBuilder only for items that are visible or about to be visible, improving performance.

📝 Syntax

advanced

Which option correctly sets a fixed aspect ratio for grid items?

You want each grid item to have a width twice its height. Which gridDelegate code achieves this?

A SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 2.0)

B SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 0.5)

C SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 100, childAspectRatio: 0.5)

D SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 100, childAspectRatio: 2.0)

💡 Hint

Remember childAspectRatio is width divided by height.

Setting childAspectRatio: 2.0 means width is twice the height. Using SliverGridDelegateWithFixedCrossAxisCount with this ratio fixes the aspect ratio for all items.

🔧 Debug

advanced

Why does this GridView.builder cause a runtime error?

Look at this code snippet:

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemCount: 5,
  itemBuilder: (context, index) {
    if (index == 4) return null;
    return Container(color: Colors.green);
  },
)

Why does it cause an error?

A Because <code>crossAxisCount</code> must be equal to <code>itemCount</code>.

B Because <code>itemBuilder</code> returned null, which is not allowed.

C Because <code>itemCount</code> is less than the number of items built.

D Because <code>Container</code> cannot be used inside <code>GridView.builder</code>.

💡 Hint

What does itemBuilder expect to return?

itemBuilder must always return a non-null widget. Returning null causes a runtime error.

🧠 Conceptual

expert

How does GridView.builder improve performance compared to GridView.count?

Choose the best explanation for why GridView.builder is more efficient than GridView.count for large data sets.

A <code>GridView.builder</code> disables scrolling by default, improving speed.

B <code>GridView.builder</code> uses less memory by caching all items, <code>GridView.count</code> does not cache.

C <code>GridView.builder</code> automatically paginates data, <code>GridView.count</code> does not.

D <code>GridView.builder</code> builds only visible items lazily, while <code>GridView.count</code> builds all items at once.

💡 Hint

Think about how many widgets are created initially.

GridView.builder creates widgets only for items visible on screen, saving CPU and memory. GridView.count builds all widgets at once, which can be slow for many items.