CustomScrollView in Flutter - Mini App: Build & Ship

Build: Custom Scroll View Demo

This screen shows a scrollable list with a floating app bar and a grid below it using CustomScrollView.

Target UI

┌───────────────────────────────┐
│          Floating AppBar       │
├───────────────────────────────┤
│ List Item 1                   │
│ List Item 2                   │
│ List Item 3                   │
│ ...                          │
│───────────────────────────────│
│ Grid Item 1  Grid Item 2      │
│ Grid Item 3  Grid Item 4      │
│ Grid Item 5  Grid Item 6      │
│ ...                          │
└───────────────────────────────┘

Use CustomScrollView as the main scrollable widget.

Add a SliverAppBar that floats and has a title 'CustomScrollView Demo'.

Add a SliverList with 5 list items labeled 'List Item 1' to 'List Item 5'.

Add a SliverGrid with 6 grid items labeled 'Grid Item 1' to 'Grid Item 6'.

Each list item and grid item should be a Container with some padding and a border.

The grid should have 2 columns.

Starter Code

Flutter

import 'package:flutter/material.dart';

class CustomScrollViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          // TODO: Add SliverAppBar here
          // TODO: Add SliverList here
          // TODO: Add SliverGrid here
        ],
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class CustomScrollViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            floating: true,
            title: Text('CustomScrollView Demo'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Container(
                padding: EdgeInsets.all(16),
                margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blueAccent),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text('List Item ${index + 1}'),
              ),
              childCount: 5,
            ),
          ),
          SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Container(
                alignment: Alignment.center,
                margin: EdgeInsets.all(8),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.green),
                  borderRadius: BorderRadius.circular(8),
                  color: Colors.green[100],
                ),
                child: Text('Grid Item ${index + 1}'),
              ),
              childCount: 6,
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 4,
              crossAxisSpacing: 4,
              childAspectRatio: 3,
            ),
          ),
        ],
      ),
    );
  }
}

We use CustomScrollView to combine different scrollable areas called slivers.

The SliverAppBar floats so it appears when you scroll up.

The SliverList shows 5 list items with padding and borders for clarity.

The SliverGrid shows 6 grid items arranged in 2 columns with spacing and styling.

This setup demonstrates how to mix different scrollable widgets in one scroll view.

Final Result

Completed Screen

┌───────────────────────────────┐
│      CustomScrollView Demo     │
├───────────────────────────────┤
│ List Item 1                   │
│ List Item 2                   │
│ List Item 3                   │
│ List Item 4                   │
│ List Item 5                   │
│───────────────────────────────│
│ Grid Item 1  Grid Item 2      │
│ Grid Item 3  Grid Item 4      │
│ Grid Item 5  Grid Item 6      │
└───────────────────────────────┘

User can scroll vertically to see all list and grid items.

When user scrolls up, the app bar appears floating at the top.

Each item is visually separated by borders and spacing.

Stretch Goal

Add a pull-to-refresh feature that shows a refresh indicator and reloads the list and grid items.

💡 Hint

Wrap CustomScrollView with RefreshIndicator and provide an async onRefresh callback.

Practice

1. What is the main purpose of a CustomScrollView in Flutter?

easy

A. To combine multiple scrollable widgets called slivers into one scrollable area.

B. To create a fixed header without scrolling.

C. To display only a single scrollable list.

D. To handle user input events like taps and swipes.

Solution

1. Step 1: Understand the role of CustomScrollView

   CustomScrollView allows combining different scrollable widgets called slivers into one scrollable area.

2. Step 2: Compare options with this understanding

   Only To combine multiple scrollable widgets called slivers into one scrollable area. correctly describes this purpose; others describe unrelated features.

3. Final Answer:

   To combine multiple scrollable widgets called slivers into one scrollable area. -> Option A

4. Quick Check:

   CustomScrollView = combine slivers [OK]

Hint: Remember: CustomScrollView = multiple slivers scrolling together [OK]

Common Mistakes:

• Thinking CustomScrollView only shows one list
• Confusing CustomScrollView with fixed headers
• Assuming it handles input events directly

2. Which of the following is the correct way to start a CustomScrollView with a sliver list in Flutter?

easy

A. CustomScrollView(children: [SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'), childCount: 10))])

B. CustomScrollView(slivers: [SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'), childCount: 10))])

C. CustomScrollView(children: [ListView.builder(itemCount: 10, itemBuilder: (context, index) => Text('Item $index'))])

D. CustomScrollView(slivers: [ListView.builder(itemCount: 10, itemBuilder: (context, index) => Text('Item $index'))])

Solution

1. Step 1: Check CustomScrollView property for slivers

   CustomScrollView uses the slivers property to accept sliver widgets, not children.

2. Step 2: Identify correct sliver list syntax

   SliverList requires a delegate like SliverChildBuilderDelegate to build items lazily.

3. Final Answer:

   CustomScrollView(slivers: [SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'), childCount: 10))]) -> Option B

4. Quick Check:

   Use slivers property with SliverList [OK]

Hint: Use slivers: [] property, not children: [] for CustomScrollView [OK]

Common Mistakes:

• Using children instead of slivers property
• Putting ListView inside CustomScrollView slivers
• Not using SliverChildBuilderDelegate for SliverList

3. What will be the visible output when running this Flutter code snippet?

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 100,
      flexibleSpace: FlexibleSpaceBar(title: Text('Header')),
      pinned: true,
    ),
    SliverList(
      delegate: SliverChildListDelegate([
        Container(height: 50, color: Colors.red),
        Container(height: 50, color: Colors.green),
        Container(height: 50, color: Colors.blue),
      ]),
    ),
  ],
)

medium

A. An error because SliverAppBar cannot be used inside CustomScrollView.

B. A static screen with only the header 'Header' visible and no scrolling.

C. A scrollable screen with three colored boxes but no header visible.

D. A scrollable screen with a pinned header titled 'Header' and three colored boxes stacked vertically.

Solution

1. Step 1: Understand SliverAppBar behavior

   SliverAppBar with pinned: true stays visible at top when scrolling.

2. Step 2: Analyze SliverList content

   SliverList shows three containers stacked vertically with specified colors and heights.

3. Final Answer:

   A scrollable screen with a pinned header titled 'Header' and three colored boxes stacked vertically. -> Option D

4. Quick Check:

   SliverAppBar pinned + SliverList visible = A scrollable screen with a pinned header titled 'Header' and three colored boxes stacked vertically. [OK]

Hint: Pinned SliverAppBar stays visible while scrolling content below [OK]

Common Mistakes:

• Thinking header disappears on scroll
• Assuming no scrolling because of pinned header
• Believing SliverAppBar causes error inside CustomScrollView

4. Identify the error in this Flutter code using CustomScrollView:

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

medium

A. SliverList cannot be used inside CustomScrollView.

B. Missing itemCount in SliverChildBuilderDelegate.

C. Using children instead of slivers property in CustomScrollView.

D. Text widget cannot be used inside SliverChildBuilderDelegate.

Solution

1. Step 1: Check CustomScrollView properties

   CustomScrollView expects sliver widgets inside the slivers property, not children.

2. Step 2: Verify other parts

   SliverChildBuilderDelegate has childCount, SliverList is valid, and Text is allowed inside delegate.

3. Final Answer:

   Using children instead of slivers property in CustomScrollView. -> Option C

4. Quick Check:

   CustomScrollView uses slivers, not children [OK]

Hint: CustomScrollView needs slivers: [], not children: [] [OK]

Common Mistakes:

• Using children property instead of slivers
• Confusing SliverList with ListView
• Thinking Text widget is invalid inside SliverChildBuilderDelegate

5. You want to create a scrollable screen with a header that shrinks on scroll, a grid of images, and a list of text items below. Which combination of slivers inside a CustomScrollView will achieve this?

hard

A. SliverAppBar (with flexibleSpace), SliverGrid, SliverList

B. SliverPersistentHeader, ListView, GridView

C. AppBar, GridView.builder, ListView.builder

D. SliverToBoxAdapter, SliverFixedExtentList, SliverFillRemaining

Solution

1. Step 1: Identify slivers for header, grid, and list

   SliverAppBar with flexibleSpace creates a shrinking header. SliverGrid shows a grid of items. SliverList shows a scrollable list.

2. Step 2: Check options for correct sliver usage

   SliverAppBar (with flexibleSpace), SliverGrid, SliverList uses all correct slivers inside CustomScrollView. Others mix non-sliver widgets or incorrect combinations.

3. Final Answer:

   SliverAppBar (with flexibleSpace), SliverGrid, SliverList -> Option A

4. Quick Check:

   Header + grid + list = SliverAppBar + SliverGrid + SliverList [OK]

Hint: Use SliverAppBar for header, SliverGrid for grid, SliverList for list [OK]

Common Mistakes:

• Using ListView/GridView inside CustomScrollView slivers
• Not using SliverAppBar for shrinking header
• Confusing SliverPersistentHeader with SliverAppBar