Метод tonal

Метод tonal виджета FilledButton Конструктор FilledButton.tonal рисует кнопку с приглушённым secondary container цветом из темы. Параметры те же, что у : onPressed и child. Вариант с иконкой - tonalIcon.

Синтаксис

FilledButton.tonal(
	onPressed: () {},
	child: Text('abcde'),
)

Параметры

Параметр	Описание
`onPressed`	Функция по нажатию. Пустое значение отключает кнопку.
`child`	Подпись или виджет внутри кнопки.

Пример

Давайте поставим tonal рядом с обычным FilledButton:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Row(
						mainAxisSize: MainAxisSize.min,
						children: [
							FilledButton(
								onPressed: () {},
								child: Text('12345'),
							),
							SizedBox(width: 8),
							FilledButton.tonal(
								onPressed: () {},
								child: Text('abcde'),
							),
						],
					),
				),
			),
		),
	);
}

tonal выглядит мягче основной FilledButton.

Пример

Давайте отключим tonal через onPressed: null:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: FilledButton.tonal(
						onPressed: null,
						child: Text('abcde'),
					),
				),
			),
		),
	);
}

Кнопка станет неактивной с disabled стилем темы.

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

виджет FilledButton,
основная залитая кнопка M3
метод tonalIcon,
tonal с иконкой
виджет OutlinedButton,
кнопка с рамкой
виджет ElevatedButton,
залитая кнопка Material 2