Slivers (SliverList, SliverGrid, SliverAppBar) in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visible effect of this SliverAppBar configuration?

Consider a SliverAppBar with pinned: true and expandedHeight: 200. What happens when you scroll up the list?

Flutter

SliverAppBar(
  pinned: true,
  expandedHeight: 200,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('Demo'),
  ),
)

A The app bar stays visible at the top and shrinks to toolbar height when scrolling up.

B The app bar scrolls out of view completely when scrolling up.

C The app bar expands and covers the list items when scrolling up.

D The app bar disappears and reappears randomly when scrolling.

💡 Hint

Pinned means the app bar stays visible at the top when scrolling.

With pinned: true, the SliverAppBar remains visible and shrinks to the toolbar height as you scroll up, providing a persistent header.

📝 Syntax

intermediate

Which option correctly creates a SliverList with 5 Text widgets?

You want to create a SliverList that shows 5 items labeled 'Item 0' to 'Item 4'. Which code snippet is correct?

Flutter

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => Text('Item $index'),
    childCount: 5,
  ),
)

A SliverList(delegate: SliverChildListDelegate(List.generate(5, (index) => Text('Item $index'))))

B SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'), childCount: 5))

C SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item ' + index.toString()), childCount: 5))

D SliverList(children: List.generate(5, (index) => Text('Item $index')))

💡 Hint

SliverList requires a delegate, not a children property.

SliverList uses a delegate property. SliverChildBuilderDelegate takes an item builder and childCount. Option B uses correct syntax.

❓ ui_behavior

advanced

What happens when you combine SliverGrid with SliverAppBar in a CustomScrollView?

You have a CustomScrollView with a SliverAppBar (floating: true) and a SliverGrid below it. What is the scrolling behavior?

Flutter

CustomScrollView(
  slivers: [
    SliverAppBar(
      floating: true,
      expandedHeight: 150,
      flexibleSpace: FlexibleSpaceBar(title: Text('Grid Demo')),
    ),
    SliverGrid(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Container(color: Colors.blue, child: Center(child: Text('$index'))),
        childCount: 20,
      ),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
    ),
  ],
)

A The app bar scrolls away and grid items overlap it.

B The app bar stays fixed at the top and grid scrolls under it.

C The app bar never appears and the grid fills the screen.

D The app bar appears when you scroll up slightly and hides when scrolling down, grid scrolls normally.

💡 Hint

Floating app bars appear when you scroll up a little.

With floating: true, the SliverAppBar shows when you scroll up slightly and hides on scroll down. The SliverGrid scrolls normally below it.

❓ lifecycle

advanced

Which statement about SliverAppBar lifecycle is true when using snap: true and floating: true?

What happens to the SliverAppBar when you quickly scroll down and release the scroll in a CustomScrollView with snap and floating enabled?

A The app bar snaps open fully immediately after scroll ends.

B The app bar stays collapsed and does not snap open.

C The app bar disappears permanently until the next scroll.

D The app bar flickers between open and closed states repeatedly.

💡 Hint

Snap makes the app bar open fully after a scroll ends if floating is true.

With snap: true and floating: true, the app bar snaps open fully when the user stops scrolling after a quick scroll down.

🔧 Debug

expert

Why does this SliverGrid code cause a runtime error?

Examine this SliverGrid code snippet. It throws an error at runtime. What is the cause?

Flutter

SliverGrid(
  delegate: SliverChildBuilderDelegate(
    (context, index) => Container(color: Colors.red),
    childCount: 10,
  ),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 0),
)

A childCount must be greater than 10 for SliverGrid.

B Container color cannot be Colors.red inside SliverGrid.

C crossAxisCount cannot be zero; it must be at least 1.

D SliverChildBuilderDelegate requires a key parameter.

💡 Hint

Check the gridDelegate parameters carefully.

crossAxisCount defines how many columns the grid has. Zero columns is invalid and causes a runtime error.