Виджет BottomAppBar

Виджет BottomAppBar передают в bottomNavigationBar или persistentFooterButtons у Scaffold. Дочерние кнопки - в child, форма выреза под FAB - в shape, цвет - в color. Часто ставят ряд IconButton.

Синтаксис

BottomAppBar(
	child: Row(
		children: [
			IconButton(onPressed: () {}, icon: Icon(Icons.menu)),
		],
	),
)

Параметры

Параметр	Описание
`child`	Содержимое панели.
`shape`	Контур с вырезом под круглую кнопку.
`color`	Цвет фона панели.

Пример

Давайте добавим BottomAppBar и FAB:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(child: Text('abcde')),
				floatingActionButton: FloatingActionButton(
					onPressed: () {},
					child: Icon(Icons.add),
				),
				floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
				bottomNavigationBar: BottomAppBar(
					child: IconButton(
						onPressed: () {},
						icon: Icon(Icons.menu),
					),
				),
			),
		),
	);
}

Внизу панель с меню, FAB сидит в вырезе по центру.

Пример

Давайте положим два IconButton:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				bottomNavigationBar: BottomAppBar(
					child: Row(
						mainAxisAlignment: MainAxisAlignment.spaceAround,
						children: [
							IconButton(onPressed: () {}, icon: Icon(Icons.home)),
							IconButton(onPressed: () {}, icon: Icon(Icons.search)),
						],
					),
				),
			),
		),
	);
}

На нижней панели две иконки по краям.

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

виджет FloatingActionButton,
которую стыкуют с BottomAppBar
виджет AppBar,
верхняя панель экрана
виджет BottomNavigationBar,
альтернатива с вкладками
виджет Scaffold,
куда передают bottomNavigationBar