🧩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 позволяют тонко настраивать поведение и внешний вид кнопки в зависимости от ваших потребностей.