Slivers (SliverList, SliverGrid, SliverAppBar) in Flutter - Mini App: Build & Ship

Build: Sliver Demo Screen

This screen demonstrates how to use SliverAppBar, SliverList, and SliverGrid together in a scrollable view.

Target UI

┌───────────────────────────────┐
│ Sliver Demo Screen            │
│ ┌─────────────────────────┐ │
│ │ SliverAppBar with title │ │
│ └─────────────────────────┘ │
│ ┌─────────────────────────┐ │
│ │ SliverList:             │ │
│ │ - Item 1                │ │
│ │ - Item 2                │ │
│ │ - Item 3                │ │
│ │ ...                     │ │
│ └─────────────────────────┘ │
│ ┌─────────────────────────┐ │
│ │ SliverGrid:             │ │
│ │ [Tile 1] [Tile 2]       │ │
│ │ [Tile 3] [Tile 4]       │ │
│ │ ...                     │ │
│ └─────────────────────────┘ │
└───────────────────────────────┘

Use a CustomScrollView as the main scrollable area.

Add a SliverAppBar with a title 'Sliver Demo' that stays visible when scrolled.

Add a SliverList below the app bar with 5 list items labeled 'List Item 1' to 'List Item 5'.

Add a SliverGrid below the list with 6 grid tiles labeled 'Grid Tile 1' to 'Grid Tile 6'.

Grid should have 2 columns with fixed spacing.

Ensure smooth scrolling through all slivers.

Starter Code

Flutter

import 'package:flutter/material.dart';

class SliverDemoScreen 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 SliverDemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            expandedHeight: 100,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver Demo'),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text('List Item ${index + 1}'),
              ),
              childCount: 5,
            ),
          ),
          SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Container(
                alignment: Alignment.center,
                margin: EdgeInsets.all(8),
                color: Colors.blue[100 * ((index % 8) + 1)],
                child: Text('Grid Tile ${index + 1}'),
              ),
              childCount: 6,
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 8,
              crossAxisSpacing: 8,
              childAspectRatio: 1.5,
            ),
          ),
        ],
      ),
    );
  }
}

We use a CustomScrollView to combine multiple slivers in one scrollable area. The SliverAppBar is pinned so it stays visible at the top when scrolling. The SliverList creates a vertical list of 5 items using SliverChildBuilderDelegate for efficiency. Below that, the SliverGrid shows 6 tiles arranged in 2 columns with spacing. Each tile is a colored container with centered text. This setup demonstrates how slivers can create flexible, performant scrolling layouts.

Final Result

Completed Screen

┌───────────────────────────────┐
│ Sliver Demo                  │
│ ┌─────────────────────────┐ │
│ │ SliverAppBar (pinned)   │ │
│ └─────────────────────────┘ │
│ ┌─────────────────────────┐ │
│ │ List Item 1             │ │
│ │ List Item 2             │ │
│ │ List Item 3             │ │
│ │ List Item 4             │ │
│ │ List Item 5             │ │
│ └─────────────────────────┘ │
│ ┌───────────────┬─────────┐ │
│ │ Grid Tile 1   │ Grid 2  │ │
│ ├───────────────┼─────────┤ │
│ │ Grid Tile 3   │ Grid 4  │ │
│ ├───────────────┼─────────┤ │
│ │ Grid Tile 5   │ Grid 6  │ │
│ └───────────────┴─────────┘ │
└───────────────────────────────┘

User can scroll up and down smoothly through the SliverList and SliverGrid.

SliverAppBar stays pinned at the top when scrolling down.

Grid tiles and list items are clearly visible with spacing.

Stretch Goal

Add a floating action button that scrolls the CustomScrollView back to the top when tapped.

💡 Hint

Use a ScrollController with the CustomScrollView and call animateTo(0) on button tap.