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

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

ElevatedButton: это виджет кнопки material design, который используется для запуска определенного действия. Он имеет рельефный внешний вид и может быть настроен с использованием различных свойств, таких как цвет, форма и высота.
TextButton: этот простой виджет кнопки с текстом. Имеет плоский внешний вид и может быть настроен с использованием различных свойств, таких как цвет, форма и текст.
IconButton: у этого виджета есть дочерний элемент — значок, и его можно настроить с помощью различных свойств, таких как цвет, форма и функция onPressed.
FloatingActionButton: этот виджет имеет круглую форму и обычно используется для основных действий в приложении.

Теперь, когда у нас есть представление о различных типах виджетов кнопок, доступных во Flutter, давайте рассмотрим, как их использовать в приложении Flutter.

Навигация по статье

Общие свойства кнопок во Flutter

Давайте рассмотрим общие свойства кнопок во Flutter, а потом закрепим их на конкретных примерах.

Основные свойства

child: это свойство используется для указания дочернего виджета, который будет отображаться внутри кнопки.
onPressed: Это свойство используется для указания функции, которая будет вызываться при нажатии кнопки.
style: Это свойство используется для указания визуальных свойств кнопки, таких как цвет фона, стиль текста и высота.
clipBehavior: Это свойство используется для указания того, как должно обрезаться содержимое кнопки, когда оно выходит за ее границы.
focusNode: Это свойство используется для указания узла фокусировки, который следует использовать, когда кнопка находится в фокусе.
autofocus: Это свойство используется для указания того, должна ли кнопка автоматически фокусироваться при вставке виджета в дерево.
enableFeedback: Это свойство используется для указания того, должна ли кнопка обеспечивать обратную связь при ее нажатии.
onLongPress: Это свойство используется для указания функции, которая будет вызываться при длительном нажатии кнопки.
tooltip: Это свойство используется для указания всплывающей подсказки, которая должна отображаться при длительном нажатии кнопки.
mouseCursor: Это свойство используется для указания курсора мыши, который следует использовать при наведении курсора мыши на кнопку.
splashColor: Это свойство задает цвет заставки, которая появляется при нажатии на кнопку. Всплеск — это визуальный индикатор того, что кнопка была нажата.
disabledColor: Это свойство задает цвет значка, когда кнопка отключена.
highlightColor: Это свойство задает цвет подсветки, которая появляется при нажатии и удерживании кнопки нажатой.
focusColor: Это свойство задает цвет значка, когда кнопка находится в фокусе.
hoverColor: Это свойство задает цвет значка при наведении указателя мыши на кнопку.
tooltip: Это свойство задает всплывающую подсказку, которая появляется при наведении на кнопку. Всплывающая подсказка — это краткое сообщение, содержащее информацию о функции кнопки.

Свойства для стилизации

Данные свойства являются дочерними для общего свойства style.

backgroundColor: Это свойство используется для установки цвета фона кнопки.
foregroundColor: Это свойство используется для установки цвета текста и значка внутри кнопки.
padding: Это свойство используется для установки отступов вокруг содержимого кнопки.
shape: Это свойство используется для настройки формы кнопки. Его можно использовать, например, для создания закругленных углов.
minimumSize: Это свойство используется для установки минимального размера кнопки.
side: Это свойство используется для добавления границы вокруг кнопки.

Виджет ElevatedButton

Вот пример того, как создать виджет с рельефной кнопкой:

ElevatedButton(
  onPressed: () {
    // Делаем что-нибудь, когда кнопка нажата.
  },
  child: Text('Press me'),
)

В этом примере мы создали виджет ElevatedButton с функцией onPressed, которая вызывается при нажатии кнопки. Дочернее свойство child используется для указания текста, который отображается на кнопке.

В результате получим:

Одним специфическим свойством виджета ElevatedButton в Flutter, которое не является общим для всех кнопок, является свойство elevation. Это свойство указывается в «родительском» свойстве style.

Свойство elevation задает высоту кнопки относительно поверхности под ней. Это значение тип double, по умолчанию равное 2.0. Увеличение значения высоты сделает кнопку более рельефной и придаст ей более выраженный эффект тени, в то время как уменьшение значения сделает кнопку более плоской.

Вот пример стилизации кнопки ElevatedButton:

ElevatedButton(
  onPressed: () {
    // Делаем что-нибудь, когда кнопка нажата.
  },
  child: Text('Press me'),
  style: ElevatedButton.styleFrom(
    textStyle: TextStyle(fontSize: 20),
    backgroundColor: Colors.purple,
    foregroundColor: Colors.white,
    elevation: 5.0,
    padding: EdgeInsets.all(20),
  )
)

В результате получаем:

Виджет TextButton

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

Вот как вы можете создать простую текстовую кнопку в Flutter:

TextButton(
  onPressed: () {
    // Делаем что-нибудь, когда кнопка нажата.
  },
  child: Text('Press Me'),
  style: TextButton.styleFrom(
    backgroundColor: Colors.blue,
    primary: Colors.purple,
    textStyle: TextStyle(fontSize: 20),
    padding: EdgeInsets.all(20),
  ),
)

В результате получаем:

Виджет IconButton

Виджет IconButton в Flutter — это кнопка Material Design, которая отображает значок. Обычно он используется, когда основным действием в пользовательском интерфейсе является выполнение определенной задачи или операции. IconButton является подклассом класса StatelessWidget и поэтому является неизменяемым.

Вот некоторые специфичные свойства виджета IconButton в Flutter:

icon: Это обязательное свойство, которое определяет значок, который будет отображаться на кнопке. Вы можете использовать любой значок из класса Icons или предоставить пользовательский значок.
iconSize: Это свойство используется для установки размера значка, отображаемого внутри кнопки Icon. Он принимает значение типа double, а значение по умолчанию равно 24.0.

Вот пример виджета Icon Button с некоторыми общими свойствами во Flutter:

IconButton(
  icon: Icon(Icons.favorite),
  iconSize: 32.0,
  color: Colors.red,
  onPressed: () {
    // Делаем что-то при нажатии кнопки.
  },
  tooltip: 'Add to favorites',
  splashColor: Colors.redAccent,
)

В результате получаем:

Виджет FloatingActionButton

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

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

Вот пример создания FloatingActionButton:

FloatingActionButton(
  onPressed: () {
    // Делаем что-то при нажатии кнопки.
  },
  child: Icon(Icons.add),
  backgroundColor: Colors.blue,
)

В результате получаем:

В Flutter виджет FloatingActionButton можно выровнять с помощью свойства FloatingActionButtonLocation виджета Scaffold.

Вот доступные свойства и положения, которое они занимают на экране:

endFloat: Размещает кнопку в правом нижнем углу экрана.
centerFloat: позиционирует кнопку в центре нижней части экрана.
startTop: Размещает кнопку в верхнем левом углу экрана.
endTop: Размещает кнопку в правом верхнем углу экрана.
miniStartTop: размещает мини-кнопку в верхнем левом углу экрана.
miniEndTop: размещает мини-кнопку в правом верхнем углу экрана.
endDocked: кнопка помещается в правом нижнем углу экрана и прикрепляется к нижней панели приложения.
centerDocked: кнопка располагается в центре нижней части экрана и прикрепляется к нижней панели приложения.

Обратите внимание, что позиции, упомянутые выше, основаны на конфигурации приложения Flutter по умолчанию. Они могут варьироваться в зависимости от макета и ориентации приложения.

Вот пример выравнивания FloatingActionButton в правом нижнем углу экрана:

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // Делаем что-то при нажатии кнопки.
    },
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
  // Добавьте остальное содержимое вашего кода для Scaffold сюда
)

Заключение

Кнопки являются важными компонентами в любом приложении, позволяя пользователям взаимодействовать с ним и выполнять различные действия. Flutter предоставляет широкий спектр виджетов кнопок, каждый со своими уникальными функциями и вариантами дизайна.

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