🧩TextButton()

Что такое TextButton

TextButton в Flutter — это виджет, который представляет собой кнопку с текстом. Он используется для выполнения действий при нажатии на кнопку. Отличительной чертой TextButton является то, что он не имеет видимого фона, что позволяет ему выглядеть более «плоским» по сравнению с другими типами кнопок, такими как ElevatedButton или OutlinedButton.

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

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

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TextButton Example')),
      body: Center(
        child: TextButton(
          onPressed: () {
            // Действие при нажатии на кнопку
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('TextButton Pressed!')),
            );
          },
          onLongPress: () {
            // Действие при длительном нажатии
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Long Pressed!')),
            );
          },
          child: const Text('Click Me'),
        ),
      ),
    );
  }
}

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

  1. TextButton: Основной виджет кнопки с текстом.

  2. onPressed: Функция, которая будет вызвана, когда кнопка будет нажата. В примере мы показываем уведомление.

  3. onLongPress: Функция, которая будет вызвана при длительном нажатии на кнопку.

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

TextButton используется, когда вам нужно создать кнопку, которая выглядит как текст и не отвлекает внимание от содержимого. Это идеальный вариант для:

  • Создания кнопок с простым текстом, которые легко воспринимаются.

  • Предоставления пользователям возможностей для выполнения действий без навязывания визуального стиля.

  • Создания интерфейсов с более легким и минималистичным дизайном.

Все настройки TextButton

  1. required void Function()? onPressed

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

    • Пример:

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

  2. void Function()? onLongPress

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

    • Пример:

      onLongPress: () {
  print('Button 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: TextButton.styleFrom(
   
  backgroundColor: Colors.grey[200], // Цвет фона
)

  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. bool? isSemanticButton = true

    • Описание: Указывает, является ли эта кнопка семантической. Используется для доступности.

    • Пример:

      isSemanticButton: true // Семантическая кнопка

  11. required Widget child

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

    • Пример:

      child: Text('Button Text') // Текст кнопки

  12. IconAlignment iconAlignment = IconAlignment.start

    • Описание: Определяет, где будет располагаться иконка (если она есть) относительно текста. Может быть IconAlignment.start, IconAlignment.end.

    • Пример:

      iconAlignment: IconAlignment.end // Иконка справа от текста

Заключение

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

PreviousКнопкиNextElevatedButton()

Last updated