Метод tonalIcon

Метод tonalIcon виджета FilledButton Конструктор FilledButton.tonalIcon совмещает приглушённый фон tonal и раскладку icon + label. Нужны onPressed, icon и label.

Синтаксис

FilledButton.tonalIcon(
	onPressed: () {},
	icon: Icon(Icons.edit),
	label: Text('abcde'),
)

Параметры

Параметр	Описание
`icon`	Значок `IconData`, который ищут.
`label`	Текст кнопки.
`onPressed`	Функция по нажатию. Пустое значение отключает кнопку.

Пример

Давайте выведем tonalIcon в Scaffold:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: FilledButton.tonalIcon(
						onPressed: () {},
						icon: Icon(Icons.edit),
						label: Text('abcde'),
					),
				),
			),
		),
	);
}

Кнопка покажет иконку карандаша и 'abcde'.

Пример

Давайте добавим tonalIcon в AppBar actions:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				appBar: AppBar(
					title: Text('12345'),
					actions: [
						Padding(
							padding: EdgeInsets.only(right: 8),
							child: FilledButton.tonalIcon(
								onPressed: () {},
								icon: Icon(Icons.save),
								label: Text('abcde'),
							),
						),
					],
				),
				body: Center(child: Text('12345')),
			),
		),
	);
}

В панели справа появится компактная tonal-кнопка.

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

метод tonal,
tonal без иконки
метод FilledButton.icon,
основная кнопка с иконкой
метод ElevatedButton.icon,
аналог Material 2
виджет IconButton,
только иконка