Slivers

CustomScrollView with SliverList and SliverAppBar

Slivers are scrollable areas that can have custom scroll effects. Use CustomScrollView to combine them.

A scroll view that accepts sliver widgets. Combine different scrolling behaviors in one view.

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('My App'),
        background: Image.asset('bg.jpg'),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, i) => ListTile(
          title: Text('Item $i'),
        ),
        childCount: 50,
      ),
    ),
  ],
)

FlexibleSpaceBar

List Item 1

List Item 2

List Item 3

List Item 4

List Item 5

List Item 6

List Item 7

List Item 8

SliverAppBar

SliverList

27 / 35