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.

Practice

1. What is the main purpose of using SliverAppBar in a Flutter app?

easy

A. To replace the default app bar with a static title

B. To display a fixed footer at the bottom of the screen

C. To create a grid layout inside a scrollable area

D. To create a header that can expand, collapse, and stay visible when scrolling

Solution

1. Step 1: Understand SliverAppBar role

   SliverAppBar is designed to create headers that can expand and collapse as the user scrolls.

2. Step 2: Compare options with SliverAppBar behavior

   Only To create a header that can expand, collapse, and stay visible when scrolling describes the expandable and pinned header behavior of SliverAppBar.

3. Final Answer:

   To create a header that can expand, collapse, and stay visible when scrolling -> Option D

4. Quick Check:

   SliverAppBar = expandable header [OK]

Hint: Remember: SliverAppBar controls flexible headers [OK]

Common Mistakes:

• Confusing SliverAppBar with fixed AppBar
• Thinking SliverAppBar creates grids or lists
• Assuming SliverAppBar is a footer widget

2. Which of the following is the correct way to create a SliverList inside a CustomScrollView?

easy

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

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

C. SliverList(itemBuilder: (context, index) => Text('Item $index'))

D. SliverList(children: [Text('Item 1'), Text('Item 2')])

Solution

1. Step 1: Recall SliverList constructor

   SliverList requires a delegate parameter, usually SliverChildBuilderDelegate or SliverChildListDelegate.

2. Step 2: Check each option's syntax

   SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'))) correctly uses delegate: SliverChildBuilderDelegate. Options A, B, and C use invalid parameters or properties.

3. Final Answer:

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

4. Quick Check:

   SliverList needs delegate = SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'))) [OK]

Hint: SliverList always needs a delegate parameter [OK]

Common Mistakes:

• Using children instead of delegate
• Using itemBuilder directly on SliverList
• Passing items instead of delegate

3. Given the code snippet below, what will be displayed on the screen?

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

medium

A. A scrollable view with a pinned app bar titled 'Hello' and 3 list items labeled Item 0 to Item 2

B. A static app bar with title 'Hello' and 3 buttons labeled Item 1 to Item 3

C. An error because SliverAppBar cannot be pinned

D. A scrollable grid with 3 items and no app bar

Solution

1. Step 1: Analyze SliverAppBar properties

   The app bar is pinned and has a flexible space with title 'Hello', so it stays visible when scrolling.

2. Step 2: Analyze SliverList delegate

   The list builds 3 items labeled 'Item 0', 'Item 1', and 'Item 2'.

3. Final Answer:

   A scrollable view with a pinned app bar titled 'Hello' and 3 list items labeled Item 0 to Item 2 -> Option A

4. Quick Check:

   Pinned SliverAppBar + SliverList with 3 items = A scrollable view with a pinned app bar titled 'Hello' and 3 list items labeled Item 0 to Item 2 [OK]

Hint: Pinned SliverAppBar stays visible; SliverList shows items lazily [OK]

Common Mistakes:

• Thinking pinned means static, not scrollable
• Confusing list items count or labels
• Assuming SliverAppBar cannot be pinned

4. Identify the error in the following Flutter code snippet using slivers:

CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      children: List.generate(4, (index) => Container(color: Colors.blue)),
    ),
  ],
)

medium

A. List.generate cannot be used inside SliverGrid

B. SliverGridDelegateWithFixedCrossAxisCount is not a valid class

C. SliverGrid requires a delegate, not a children parameter

D. CustomScrollView cannot contain SliverGrid

Solution

1. Step 1: Check SliverGrid constructor requirements

   SliverGrid requires a delegate parameter, not children.

2. Step 2: Validate other parts

   SliverGridDelegateWithFixedCrossAxisCount is valid, and List.generate can be used inside a delegate.

3. Final Answer:

   SliverGrid requires a delegate, not a children parameter -> Option C

4. Quick Check:

   SliverGrid needs delegate, not children [OK]

Hint: SliverGrid uses delegate, not children, for lazy loading [OK]

Common Mistakes:

• Using children instead of delegate in SliverGrid
• Confusing SliverGridDelegateWithFixedCrossAxisCount as invalid
• Thinking CustomScrollView disallows SliverGrid

5. You want to create a scrollable screen with a header that expands and pins, followed by a grid of images with 3 columns, and then a list of text items. Which of the following is the best way to structure your Flutter widget tree?

hard

A. CustomScrollView(slivers: [SliverAppBar(pinned: true, expandedHeight: 200, flexibleSpace: FlexibleSpaceBar(title: Text('Gallery'))), SliverGrid(delegate: SliverChildBuilderDelegate((c, i) => Image.network(urls[i]), childCount: urls.length), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3)), SliverList(delegate: SliverChildBuilderDelegate((c, i) => ListTile(title: Text(items[i])), childCount: items.length))])

B. ListView(children: [AppBar(title: Text('Gallery')), GridView.count(crossAxisCount: 3, children: images), ListView(children: texts)])

C. CustomScrollView(children: [SliverAppBar(), SliverGrid(), SliverList()])

D. Column(children: [SliverAppBar(), SliverGrid(), SliverList()])

Solution

1. Step 1: Identify correct widget for scrollable slivers

   CustomScrollView with slivers parameter is needed to combine SliverAppBar, SliverGrid, and SliverList.

2. Step 2: Check each option's structure

   CustomScrollView(slivers: [SliverAppBar(pinned: true, expandedHeight: 200, flexibleSpace: FlexibleSpaceBar(title: Text('Gallery'))), SliverGrid(delegate: SliverChildBuilderDelegate((c, i) => Image.network(urls[i]), childCount: urls.length), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3)), SliverList(delegate: SliverChildBuilderDelegate((c, i) => ListTile(title: Text(items[i])), childCount: items.length))]) correctly uses CustomScrollView with slivers and proper delegates. ListView(children: [AppBar(title: Text('Gallery')), GridView.count(crossAxisCount: 3, children: images), ListView(children: texts)]) uses nested scrollables incorrectly. CustomScrollView(children: [SliverAppBar(), SliverGrid(), SliverList()]) uses children instead of slivers. Column(children: [SliverAppBar(), SliverGrid(), SliverList()]) uses Column which cannot host slivers.

3. Final Answer:

   CustomScrollView with SliverAppBar, SliverGrid, and SliverList using delegates -> Option A

4. Quick Check:

   Use CustomScrollView with slivers and delegates = CustomScrollView(slivers: [SliverAppBar(pinned: true, expandedHeight: 200, flexibleSpace: FlexibleSpaceBar(title: Text('Gallery'))), SliverGrid(delegate: SliverChildBuilderDelegate((c, i) => Image.network(urls[i]), childCount: urls.length), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3)), SliverList(delegate: SliverChildBuilderDelegate((c, i) => ListTile(title: Text(items[i])), childCount: items.length))]) [OK]

Hint: Use CustomScrollView with slivers and delegates for mixed scroll content [OK]

Common Mistakes:

• Using ListView or Column instead of CustomScrollView for slivers
• Passing slivers as children instead of slivers parameter
• Not using delegates for SliverGrid and SliverList