🧩FloatingActionButton

Что такое FloatingActionButton

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

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

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

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

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

   • Пример:

     child: Icon(Icons.add) // Иконка на кнопке

2. String? tooltip

   • Описание: Подсказка, которая отображается при долгом нажатии на кнопку.

   • Пример:

     tooltip: 'Add New Item' // Подсказка

3. Color? foregroundColor

   • Описание: Цвет элементов переднего плана (например, иконки или текста) кнопки.

   • Пример:

     foregroundColor: Colors.white // Цвет иконки

4. Color? backgroundColor

   • Описание: Цвет фона кнопки.

   • Пример:

     backgroundColor: Colors.blue // Цвет фона

5. Color? focusColor

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

   • Пример:

     focusColor: Colors.green // Цвет при фокусе

6. Color? hoverColor

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

   • Пример:

     hoverColor: Colors.red // Цвет при наведении

7. Color? splashColor

   • Описание: Цвет эффекта всплеска, когда кнопка нажата.

   • Пример:

     splashColor: Colors.yellow // Цвет эффекта всплеска

8. Object? heroTag

   • Описание: Метка для анимации перехода между экранами. Позволяет избежать конфликта с несколькими FAB на одном экране.

   • Пример:

     heroTag: 'uniqueTag' // Уникальная метка для анимации

9. double? elevation

   • Описание: Высота тени для кнопки, создающая эффект наложения.

   • Пример:

     elevation: 6.0 // Установка высоты тени

10. double? focusElevation

    • Описание: Высота тени, когда кнопка находится в фокусе.

    • Пример:

      focusElevation: 10.0 // Высота тени при фокусе

11. double? hoverElevation

    • Описание: Высота тени, когда кнопка наводится курсором.

    • Пример:

      hoverElevation: 8.0 // Высота тени при наведении

12. double? highlightElevation

    • Описание: Высота тени, когда кнопка нажата.

    • Пример:

      highlightElevation: 5.0 // Высота тени при нажатии

13. double? disabledElevation

    • Описание: Высота тени для отключенной кнопки.

    • Пример:

      disabledElevation: 0.0 // Высота тени для отключенной кнопки

14. required void Function()? onPressed

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

    • Пример:

      onPressed: () {
        print('Button pressed'); // Действие при нажатии
      }

15. MouseCursor? mouseCursor

    • Описание: Курсор мыши, отображаемый при наведении на кнопку.

    • Пример:

      mouseCursor: SystemMouseCursors.click // Курсор при наведении

16. bool mini = false

    • Описание: Если true, кнопка будет миниатюрной (меньшего размера).

    • Пример:

      mini: true // Миниатюрная кнопка

17. ShapeBorder? shape

    • Описание: Форма кнопки. Позволяет настраивать углы и контуры.

    • Пример:

      shape: CircleBorder() // Круглая форма

18. Clip clipBehavior = Clip.none

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

    • Пример:

      clipBehavior: Clip.hardEdge // Жесткая обрезка

19. FocusNode? focusNode

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

    • Пример:

      focusNode: FocusNode() // Указатель на узел фокуса

20. bool autofocus = false

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

    • Пример:

      autofocus: true // Автофокус

21. MaterialTapTargetSize? materialTapTargetSize

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

    • Пример:

      materialTapTargetSize: MaterialTapTargetSize.padded // Увеличенная область нажатия

22. bool isExtended = false

    • Описание: Если true, кнопка будет расширена и может содержать текст.

    • Пример:

      isExtended: true // Расширенная кнопка

23. bool? enableFeedback

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

    • Пример:

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

Заключение

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