Виджет FloatingActionButton

Виджет FloatingActionButton передают в floatingActionButton у Scaffold. Иконку или текст кладут в child, нажатие обрабатывают в onPressed, подсказку - в tooltip. Положение на экране задаёт FloatingActionButtonLocation через floatingActionButtonLocation у Scaffold.

Синтаксис

FloatingActionButton(
	onPressed: () {},
	tooltip: 'abcde',
	child: Icon(Icons.add),
)

Параметры

Параметр	Описание
`onPressed`	Вызывается при нажатии. Если null, кнопка неактивна.
`child`	Иконка или короткий текст внутри круга.
`backgroundColor`	Цвет заливки кнопки.
`tooltip`	Подсказка при длительном наведении.

Методы

Метод	Описание
`extended`	Строит вытянутую кнопку с текстом и иконкой.

Пример

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

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(child: Text('abcde')),
				floatingActionButton: FloatingActionButton(
					onPressed: () {},
					child: Icon(Icons.add),
				),
			),
		),
	);
}

В правом нижнем углу появится круглая кнопка с иконкой плюса.

Пример

Давайте сменим цвет фона кнопки:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(child: Text('12345')),
				floatingActionButton: FloatingActionButton(
					backgroundColor: Colors.orange,
					onPressed: () {},
					child: Icon(Icons.edit),
				),
			),
		),
	);
}

Круглая кнопка станет оранжевой с иконкой карандаша.

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

виджет Scaffold,
куда передают floatingActionButton
класс FloatingActionButtonLocation,
который задаёт угол экрана для кнопки
виджет BottomAppBar,
который вырезает место под FAB снизу
виджет IconButton,
который рисует квадратную кнопку с иконкой