🧩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'),
        ),
      ),
    );
  }
}

Как работает код

  1. ElevatedButton: Основной виджет кнопки с эффектом приподнятости.

  2. onPressed: Функция, которая будет вызвана, когда кнопка будет нажата. В примере мы показываем уведомление.

  3. onLongPress: Функция, которая будет вызвана при длительном нажатии на кнопку.

Зачем это нужно

ElevatedButton используется, когда вам нужно сделать кнопку, которая явно выделяется на фоне других элементов интерфейса. Это идеальный вариант для:

  • Подсветки важных действий, таких как отправка формы, подтверждение действия или переход на другой экран.

  • Создания интерфейсов, где требуется выразительный и заметный элемент управления.

  • Упрощения восприятия и повышения доступности интерфейса для пользователей.

Все настройки ElevatedButton

  1. required void Function()? onPressed

    • Описание: Функция, которая будет вызвана при нажатии на кнопку. Обязательный параметр.

    • Пример:

      onPressed: () {
        print('ElevatedButton Pressed'); // Действие при нажатии
      }
  2. void Function()? onLongPress

    • Описание: Функция, которая будет вызвана при длительном нажатии на кнопку.

    • Пример:

      onLongPress: () {
        print('Long Pressed'); // Действие при длительном нажатии
      }
  3. void Function(bool)? onHover

    • Описание: Функция, которая будет вызвана, когда указатель мыши будет наведён на кнопку или убран с неё. Принимает true или false в зависимости от состояния.

    • Пример:

      onHover: (isHovered) {
        if (isHovered) {
          print('Hovered'); // Действие при наведении
        }
      }
  4. void Function(bool)? onFocusChange

    • Описание: Функция, которая будет вызвана при изменении состояния фокуса кнопки.

    • Пример:

      onFocusChange: (hasFocus) {
        if (hasFocus) {
          print('Button Focused'); // Действие при получении фокуса
        }
      }
  5. ButtonStyle? style

    • Описание: Стиль кнопки, который позволяет настраивать её внешний вид, например, цвет, размеры, фон и т.д.

    • Пример:

      style: ElevatedButton.styleFrom(
        primary: Colors.blue, // Цвет фона кнопки
        onPrimary: Colors.white, // Цвет текста
      )
  6. FocusNode? focusNode

    • Описание: Указывает на узел фокуса, который используется для управления фокусом этой кнопки.

    • Пример:

      focusNode: FocusNode() // Указатель на узел фокуса
  7. bool autofocus = false

    • Описание: Если true, кнопка автоматически получит фокус, когда виджет будет построен.

    • Пример:

      autofocus: true // Автофокус при загрузке
  8. Clip? clipBehavior

    • Описание: Определяет, как будут обрабатываться элементы, выходящие за пределы кнопки. Может быть Clip.hardEdge, Clip.antiAlias, Clip.none.

    • Пример:

      clipBehavior: Clip.antiAlias // Обработка выхода элементов
  9. WidgetStatesController? statesController

    • Описание: Позволяет контролировать состояние виджета в зависимости от различных событий.

    • Пример:

      statesController: WidgetStatesController() // Контроллер состояний
  10. required Widget? child

    • Описание: Дочерний виджет, который будет отображаться внутри кнопки. Обязательный параметр.

    • Пример:

      child: Text('Elevated Button Text') // Текст кнопки
  11. IconAlignment iconAlignment = IconAlignment.start

    • Описание: Определяет, где будет располагаться иконка (если она есть) относительно текста. Может быть IconAlignment.start, IconAlignment.end.

    • Пример:

      iconAlignment: IconAlignment.end // Иконка справа от текста

Заключение

ElevatedButton — это мощный инструмент для создания интерактивных элементов в Flutter, который помогает выделять важные действия на экране. Его стиль и настройки позволяют легко адаптировать кнопку под любые требования дизайна и функционала, обеспечивая при этом интуитивно понятный интерфейс для пользователей.

Last updated