# FloatingActionButton

#### Что такое `FloatingActionButton`

`FloatingActionButton` (FAB) в Flutter — это круглая кнопка, обычно расположенная в нижнем правом углу экрана, которая предназначена для выполнения основного действия в приложении. FAB может содержать иконку или текст и используется для выполнения действия, которое должно быть легко доступно пользователю, например, создания нового объекта, отправки сообщения или открытия нового экрана.

#### Пример использования

Вот простой пример использования `FloatingActionButton` в приложении Flutter:

<div align="left"><figure><img src="https://i.postimg.cc/T3BdM3x9/Fab-ezgif-com-video-to-gif-converter.gif" alt="" width="188"><figcaption></figcaption></figure></div>

```dart
import 'package:flutter/material.dart';

class FloatingActionButtonExample extends StatelessWidget {
  const FloatingActionButtonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Floating Action Button Example')),
      body: const Center(child: Text('Press the button below')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: const Text('Pressed'),
            ),
          );
        },
        tooltip: 'Add',
        child: const Icon(Icons.add), // Иконка на кнопке
      ),
    );
  }
}
```

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

1. **FloatingActionButton**: Основной виджет кнопки.
2. **onPressed**: Функция, которая вызывается при нажатии на кнопку. Здесь мы просто выводим сообщение в консоль.
3. **tooltip**: Подсказка, отображаемая при долгом нажатии на кнопку.
4. **child**: Внутренний виджет, который отображается на кнопке. В данном случае это иконка.

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

`FloatingActionButton` является важной частью пользовательского интерфейса, позволяя пользователям быстро выполнять действия, такие как:

* Создание нового элемента.
* Отправка сообщения.
* Открытие нового экрана или диалогового окна.

Использование FAB делает интерфейс более интуитивным и легким для восприятия.

#### Все настройки `FloatingActionButton`

1. **Widget? child**
   * **Описание**: Дочерний виджет, который будет отображаться внутри кнопки (например, иконка или текст).
   *   **Пример**:

       ```dart
       child: Icon(Icons.add) // Иконка на кнопке
       ```
2. **String? tooltip**
   * **Описание**: Подсказка, которая отображается при долгом нажатии на кнопку.
   *   **Пример**:

       ```dart
       tooltip: 'Add New Item' // Подсказка
       ```
3. **Color? foregroundColor**
   * **Описание**: Цвет элементов переднего плана (например, иконки или текста) кнопки.
   *   **Пример**:

       ```dart
       foregroundColor: Colors.white // Цвет иконки
       ```
4. **Color? backgroundColor**
   * **Описание**: Цвет фона кнопки.
   *   **Пример**:

       ```dart
       backgroundColor: Colors.blue // Цвет фона
       ```
5. **Color? focusColor**
   * **Описание**: Цвет, используемый при фокусе на кнопке.
   *   **Пример**:

       ```dart
       focusColor: Colors.green // Цвет при фокусе
       ```
6. **Color? hoverColor**
   * **Описание**: Цвет, используемый при наведении курсора на кнопку.
   *   **Пример**:

       ```dart
       hoverColor: Colors.red // Цвет при наведении
       ```
7. **Color? splashColor**
   * **Описание**: Цвет эффекта всплеска, когда кнопка нажата.
   *   **Пример**:

       ```dart
       splashColor: Colors.yellow // Цвет эффекта всплеска
       ```
8. **Object? heroTag**
   * **Описание**: Метка для анимации перехода между экранами. Позволяет избежать конфликта с несколькими FAB на одном экране.
   *   **Пример**:

       ```dart
       heroTag: 'uniqueTag' // Уникальная метка для анимации
       ```
9. **double? elevation**
   * **Описание**: Высота тени для кнопки, создающая эффект наложения.
   *   **Пример**:

       ```dart
       elevation: 6.0 // Установка высоты тени
       ```
10. **double? focusElevation**
    * **Описание**: Высота тени, когда кнопка находится в фокусе.
    *   **Пример**:

        ```dart
        focusElevation: 10.0 // Высота тени при фокусе
        ```
11. **double? hoverElevation**
    * **Описание**: Высота тени, когда кнопка наводится курсором.
    *   **Пример**:

        ```dart
        hoverElevation: 8.0 // Высота тени при наведении
        ```
12. **double? highlightElevation**
    * **Описание**: Высота тени, когда кнопка нажата.
    *   **Пример**:

        ```dart
        highlightElevation: 5.0 // Высота тени при нажатии
        ```
13. **double? disabledElevation**
    * **Описание**: Высота тени для отключенной кнопки.
    *   **Пример**:

        ```dart
        disabledElevation: 0.0 // Высота тени для отключенной кнопки
        ```
14. **required void Function()? onPressed**
    * **Описание**: Функция, которая вызывается при нажатии на кнопку. Обязательный параметр.
    *   **Пример**:

        ```dart
        onPressed: () {
          print('Button pressed'); // Действие при нажатии
        }
        ```
15. **MouseCursor? mouseCursor**
    * **Описание**: Курсор мыши, отображаемый при наведении на кнопку.
    *   **Пример**:

        ```dart
        mouseCursor: SystemMouseCursors.click // Курсор при наведении
        ```
16. **bool mini = false**
    * **Описание**: Если true, кнопка будет миниатюрной (меньшего размера).
    *   **Пример**:

        ```dart
        mini: true // Миниатюрная кнопка
        ```
17. **ShapeBorder? shape**
    * **Описание**: Форма кнопки. Позволяет настраивать углы и контуры.
    *   **Пример**:

        ```dart
        shape: CircleBorder() // Круглая форма
        ```
18. **Clip clipBehavior = Clip.none**
    * **Описание**: Определяет, как должны обрабатываться части кнопки, выходящие за пределы своей формы.
    *   **Пример**:

        ```dart
        clipBehavior: Clip.hardEdge // Жесткая обрезка
        ```
19. **FocusNode? focusNode**
    * **Описание**: Узел фокуса для управления фокусом этой кнопки.
    *   **Пример**:

        ```dart
        focusNode: FocusNode() // Указатель на узел фокуса
        ```
20. **bool autofocus = false**
    * **Описание**: Если true, кнопка автоматически получит фокус при загрузке.
    *   **Пример**:

        ```dart
        autofocus: true // Автофокус
        ```
21. **MaterialTapTargetSize? materialTapTargetSize**
    * **Описание**: Размер области нажатия кнопки. Позволяет увеличить область нажатия для удобства пользователей.
    *   **Пример**:

        ```dart
        materialTapTargetSize: MaterialTapTargetSize.padded // Увеличенная область нажатия
        ```
22. **bool isExtended = false**
    * **Описание**: Если true, кнопка будет расширена и может содержать текст.
    *   **Пример**:

        ```dart
        isExtended: true // Расширенная кнопка
        ```
23. **bool? enableFeedback**
    * **Описание**: Если true, будет предоставлена тактильная обратная связь при взаимодействии с элементом.
    *   **Пример**:

        ```dart
        enableFeedback: true // Включение обратной связи
        ```

#### Заключение

`FloatingActionButton` является важным элементом пользовательского интерфейса в приложениях Flutter, позволяя пользователям выполнять основные действия с лёгкостью. Он предлагает множество параметров для настройки стиля и поведения, что делает его универсальным инструментом для разработчиков.
