Виджет ElevatedButton

Виджет ElevatedButton показывает главное действие на экране. Подпись передают в child, нажатие - в onPressed, оформление - в style. Вариант с иконкой собирают через icon, стиль - через styleFrom.

Синтаксис

ElevatedButton(
	onPressed: () {},
	child: Text('abcde'),
)

Параметры

Параметр	Описание
`onPressed`	Вызывается при нажатии.
`child`	Текст или виджет на кнопке.
`style`	`ButtonStyle` с цветами и формой.

Методы

Метод	Описание
`icon`	Создаёт кнопку с иконкой и подписью.
`styleFrom`	Собирает `ButtonStyle` для `ElevatedButton`.

Пример

Давайте выведем ElevatedButton по центру:

import 'package:flutter/material.dart';

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

На экране кнопка с тенью и текстом 'abcde'.

Пример

Давайте зададим цвет через styleFrom:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ElevatedButton(
						style: ElevatedButton.styleFrom(
							backgroundColor: Colors.green,
						),
						onPressed: () {},
						child: Text('12345'),
					),
				),
			),
		),
	);
}

Кнопка станет зелёной с подписью '12345'.

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

виджет TextButton,
который рисует плоскую текстовую кнопку
виджет OutlinedButton,
который обводит кнопку контуром
виджет FilledButton,
который заливает кнопку без тени Material 3
класс ButtonStyle,
которым настраивают внешний вид