Виджет AppBar

Виджет AppBar ставят в appBar у Scaffold. Заголовок передают в title, иконки справа - в actions, кнопку слева - в leading. Под панелью можно закрепить вкладки через bottom, обычно с TabBar.

Синтаксис

AppBar(
	title: Text('abcde'),
	actions: [
		IconButton(onPressed: () {}, icon: Icon(Icons.search)),
	],
)

Параметры

Параметр	Описание
`title`	Заголовок по центру панели.
`actions`	Список виджетов справа, чаще `IconButton`.
`leading`	Виджет слева. Часто кнопка меню или `BackButton`.
`bottom`	Нижняя полоса под заголовком, например `TabBar`.

Пример

Давайте покажем AppBar на экране:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: Text('abcde')),
				body: Center(child: Text('12345')),
			),
		),
	);
}

Сверху панель с заголовком 'abcde', по центру тела - строка '12345'.

Пример

Давайте добавим кнопку поиска в actions:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				appBar: AppBar(
					title: Text('abcde'),
					actions: [
						IconButton(
							onPressed: () {},
							icon: Icon(Icons.search),
						),
					],
				),
				body: Center(child: Text('12345')),
			),
		),
	);
}

Справа на панели появится иконка лупы.

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

виджет Scaffold,
куда передают AppBar в параметр appBar
виджет PreferredSize,
который задаёт высоту нижней полосы AppBar
виджет BottomAppBar,
который ставят под круглой кнопкой внизу экрана
виджет SliverAppBar,
который ведёт себя как AppBar внутри прокрутки