Виджет SliverAppBar

Виджет SliverAppBar кладут в slivers у CustomScrollView. Фон задаёт FlexibleSpaceBar в flexibleSpace, режим сжатия - collapseMode из CollapseMode.

Синтаксис

SliverAppBar(title: Text('abcde'))

Параметры

Параметр	Описание
`title`	Заголовок в панели.
`floating`	Появляться при прокрутке вверх.
`pinned`	Оставлять полоску на экране.
`flexibleSpace`	Фон, который сжимается.

Пример

Давайте прикрепим шапку к списку:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: CustomScrollView(
					slivers: [
						SliverAppBar(title: Text('abcde'), pinned: true),
						SliverList.list(
							children: List.generate(20, (i) => ListTile(title: Text('12345'))),
						),
					],
			),
		),
	);
}

На экране шапка остаётся сверху, список уходит под неё при прокрутке.

Пример

Давайте добавим большую flexibleSpace:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: CustomScrollView(
					slivers: [
						SliverAppBar(
							expandedHeight: 120,
							flexibleSpace: FlexibleSpaceBar(title: Text('abcde')),
						),
						SliverList.list(children: [Text('12345')]),
					],
			),
		),
	);
}

На экране фон шапки сжимается при прокрутке вниз.

Смотрите также

класс ScrollNotification,
который часто ставят рядом в прокручиваемых экранах
виджет FlexibleSpaceBar,
который дополняет работу с прокруткой
класс AlwaysScrollableScrollPhysics,
который помогает собрать сложный список
виджет SliverList,
который задаёт поведение или данные прокрутки