CustomScrollView in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visible output of this CustomScrollView code?

Consider this Flutter code snippet using CustomScrollView. What will the user see on the screen?

Flutter

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 150,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Hello'),
      ),
      pinned: true,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 3,
      ),
    ),
  ],
)

A A scrollable list with a pinned app bar titled 'Hello' that stays visible on top while scrolling through 3 list items.

B A static app bar with title 'Hello' and a non-scrollable list of 3 items below it.

C An error because SliverAppBar cannot be used inside CustomScrollView.

D A scrollable list with no app bar visible and 3 list items.

💡 Hint

Remember that SliverAppBar with pinned:true stays visible when scrolling.

The SliverAppBar with pinned:true stays fixed at the top while the SliverList scrolls beneath it. The FlexibleSpaceBar shows the title 'Hello'.

❓ lifecycle

intermediate

What happens when you scroll up in this CustomScrollView?

Given this CustomScrollView with a SliverAppBar that has floating: true and snap: true, what is the behavior when the user scrolls up slightly?

Flutter

CustomScrollView(
  slivers: [
    SliverAppBar(
      floating: true,
      snap: true,
      expandedHeight: 100,
      flexibleSpace: FlexibleSpaceBar(title: Text('Snap AppBar')),
    ),
    SliverList(
      delegate: SliverChildListDelegate(List.generate(10, (i) => ListTile(title: Text('Item $i')))),
    ),
  ],
)

A The app bar expands and collapses smoothly without snapping.

B The app bar stays hidden until the user scrolls to the top of the list.

C The app bar immediately snaps open and becomes fully visible when the user scrolls up slightly.

D The app bar disappears permanently after scrolling.

💡 Hint

Floating and snap together cause the app bar to appear quickly on scroll up.

With floating:true and snap:true, the app bar snaps fully open immediately when the user scrolls up even a little.

📝 Syntax

advanced

Which option correctly creates a CustomScrollView with a SliverGrid?

Select the code snippet that correctly builds a CustomScrollView containing a SliverGrid with 4 items arranged in 2 columns.

A CustomScrollView(children: [SliverGrid(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'), childCount: 4), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2))])

B CustomScrollView(slivers: [SliverGrid(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'), childCount: 4), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2))])

C CustomScrollView(slivers: [SliverGrid(delegate: SliverChildListDelegate([Text('Item 0'), Text('Item 1'), Text('Item 2'), Text('Item 3')]), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2))])

D CustomScrollView(slivers: [SliverGrid(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index')), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4))])

💡 Hint

CustomScrollView uses the slivers parameter, not children.

Option B correctly uses slivers with SliverGrid, SliverChildBuilderDelegate with childCount 4, and gridDelegate with 2 columns.

🔧 Debug

advanced

Why does this CustomScrollView code cause a runtime error?

This code throws an error when run. What is the cause?

Flutter

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 5,
      ),
    ),
    Container(height: 100, color: Colors.red),
  ],
)

A A Container widget cannot be a direct child of slivers; only sliver widgets are allowed.

B CustomScrollView requires a ScrollController to be set explicitly.

C SliverList must be the last sliver in the list.

D SliverChildBuilderDelegate requires a childCount of zero or null to work properly.

💡 Hint

Check what types of widgets are allowed inside the slivers list.

CustomScrollView's slivers list only accepts sliver widgets. Container is not a sliver and causes a runtime error.

🧠 Conceptual

expert

How many items are visible initially in this CustomScrollView with SliverFixedExtentList?

Given this code, how many list items will be visible on the screen initially if the screen height is 600 pixels?

Flutter

CustomScrollView(
  slivers: [
    SliverFixedExtentList(
      itemExtent: 120,
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 10,
      ),
    ),
  ],
)

A 4 items

B 10 items

C 6 items

D 5 items

💡 Hint

Divide screen height by itemExtent to find visible items count.

Each item is 120 pixels tall. 600 / 120 = 5 items fit exactly on screen initially.