🧩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, который помогает выделять важные действия на экране. Его стиль и настройки позволяют легко адаптировать кнопку под любые требования дизайна и функционала, обеспечивая при этом интуитивно понятный интерфейс для пользователей.