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

PreviousDropDownButton()NextCheckbox

Last updated