🧩ElevatedButton()
Что такое ElevatedButton
ElevatedButton
ElevatedButton
в Flutter — это виджет, который представляет собой кнопку с тенью, создающей эффект «приподнятости». Этот стиль кнопки позволяет пользователям легко идентифицировать доступные действия на экране, делая интерфейс более интуитивно понятным. В отличие от TextButton
, ElevatedButton
имеет фоновый цвет и тень, что придает ему более выраженный вид.
Пример использования
Вот пример использования ElevatedButton
в приложении Flutter:

import 'package:flutter/material.dart';
class ElevatedButtonExample extends StatelessWidget {
const ElevatedButtonExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('ElevatedButton Example')),
body: Center(
child: ElevatedButton(
onPressed: () {
// Действие при нажатии на кнопку
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('ElevatedButton Pressed!')),
);
},
onLongPress: () {
// Действие при длительном нажатии
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Long Pressed!')),
);
},
child: const Text('Click Me'),
),
),
);
}
}
Как работает код
ElevatedButton: Основной виджет кнопки с эффектом приподнятости.
onPressed: Функция, которая будет вызвана, когда кнопка будет нажата. В примере мы показываем уведомление.
onLongPress: Функция, которая будет вызвана при длительном нажатии на кнопку.
Зачем это нужно
ElevatedButton
используется, когда вам нужно сделать кнопку, которая явно выделяется на фоне других элементов интерфейса. Это идеальный вариант для:
Подсветки важных действий, таких как отправка формы, подтверждение действия или переход на другой экран.
Создания интерфейсов, где требуется выразительный и заметный элемент управления.
Упрощения восприятия и повышения доступности интерфейса для пользователей.
Все настройки ElevatedButton
ElevatedButton
required void Function()? onPressed
Описание: Функция, которая будет вызвана при нажатии на кнопку. Обязательный параметр.
Пример:
onPressed: () { print('ElevatedButton Pressed'); // Действие при нажатии }
void Function()? onLongPress
Описание: Функция, которая будет вызвана при длительном нажатии на кнопку.
Пример:
onLongPress: () { print('Long Pressed'); // Действие при длительном нажатии }
void Function(bool)? onHover
Описание: Функция, которая будет вызвана, когда указатель мыши будет наведён на кнопку или убран с неё. Принимает
true
илиfalse
в зависимости от состояния.Пример:
onHover: (isHovered) { if (isHovered) { print('Hovered'); // Действие при наведении } }
void Function(bool)? onFocusChange
Описание: Функция, которая будет вызвана при изменении состояния фокуса кнопки.
Пример:
onFocusChange: (hasFocus) { if (hasFocus) { print('Button Focused'); // Действие при получении фокуса } }
ButtonStyle? style
Описание: Стиль кнопки, который позволяет настраивать её внешний вид, например, цвет, размеры, фон и т.д.
Пример:
style: ElevatedButton.styleFrom( primary: Colors.blue, // Цвет фона кнопки onPrimary: Colors.white, // Цвет текста )
FocusNode? focusNode
Описание: Указывает на узел фокуса, который используется для управления фокусом этой кнопки.
Пример:
focusNode: FocusNode() // Указатель на узел фокуса
bool autofocus = false
Описание: Если true, кнопка автоматически получит фокус, когда виджет будет построен.
Пример:
autofocus: true // Автофокус при загрузке
Clip? clipBehavior
Описание: Определяет, как будут обрабатываться элементы, выходящие за пределы кнопки. Может быть
Clip.hardEdge
,Clip.antiAlias
,Clip.none
.Пример:
clipBehavior: Clip.antiAlias // Обработка выхода элементов
WidgetStatesController? statesController
Описание: Позволяет контролировать состояние виджета в зависимости от различных событий.
Пример:
statesController: WidgetStatesController() // Контроллер состояний
required Widget? child
Описание: Дочерний виджет, который будет отображаться внутри кнопки. Обязательный параметр.
Пример:
child: Text('Elevated Button Text') // Текст кнопки
IconAlignment iconAlignment = IconAlignment.start
Описание: Определяет, где будет располагаться иконка (если она есть) относительно текста. Может быть
IconAlignment.start
,IconAlignment.end
.Пример:
iconAlignment: IconAlignment.end // Иконка справа от текста
Заключение
ElevatedButton
— это мощный инструмент для создания интерактивных элементов в Flutter, который помогает выделять важные действия на экране. Его стиль и настройки позволяют легко адаптировать кнопку под любые требования дизайна и функционала, обеспечивая при этом интуитивно понятный интерфейс для пользователей.
Last updated