Виджет FlexibleSpaceBar

Виджет FlexibleSpaceBar передают в flexibleSpace у SliverAppBar. Заголовок задают в title, картинку - в background.

Синтаксис

FlexibleSpaceBar(title: Text('abcde'))

Параметры

Параметр	Описание
`title`	Заголовок на фоне.
`background`	Виджет под заголовком, часто `Image`.
`centerTitle`	Центрировать заголовок.

Пример

Давайте сделаем цветной фон:

import 'package:flutter/material.dart';

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

На экране синий фон сжимается, заголовок остаётся читаемым.

Пример

Давайте центрируем заголовок:

import 'package:flutter/material.dart';

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

На экране подпись в flexibleSpace стоит по центру.

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

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