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.