🧩Tooltip

Что такое Tooltip

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

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

Вот пример, как использовать Tooltip в вашем приложении:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tooltip Example')),
      body: Center(
        child: Tooltip(
          message: 'Нажмите, чтобы открыть настройки',
          child: IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () {
              // Обработка нажатия кнопки
            },
          ),
        ),
      ),
    );
  }
}

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

1. message: Это текст, который будет отображаться в тултипе.

2. child: Это виджет, к которому прикреплен тултип (в данном случае кнопка).

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

1. String? message

   • Описание: Простое сообщение, отображаемое в тултипе.

   • Пример:

     message: 'Это тултип' // Сообщение

2. InlineSpan? richMessage

   • Описание: Позволяет использовать сложные сообщения с текстом и стилями, вместо простого текстового сообщения.

   • Пример:

     richMessage: TextSpan(
       text: 'Это ',
       style: TextStyle(color: Colors.black),
       children: [
         TextSpan(text: 'тултип', style: TextStyle(fontWeight: FontWeight.bold)),
       ],
     ) // Используем InlineSpan

3. double? height

   • Описание: Высота тултипа. Это может быть полезно для управления расположением содержимого.

   • Пример:

     height: 30.0 // Высота тултипа

4. EdgeInsetsGeometry? padding

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

   • Пример:

     padding: EdgeInsets.all(8.0) // Поля в 8 пикселей

5. EdgeInsetsGeometry? margin

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

   • Пример:

     margin: EdgeInsets.all(10.0) // Поля для тултипа

6. double? verticalOffset

   • Описание: Вертикальное смещение тултипа относительно виджета.

   • Пример:

     verticalOffset: 10.0 // Смещение на 10 пикселей вверх

7. bool? preferBelow

   • Описание: Указывает, следует ли показывать тултип ниже виджета (true) или выше (false).

   • Пример:

     preferBelow: true // Показывать тултип ниже виджета

8. bool? excludeFromSemantics

   • Описание: Указывает, следует ли исключить тултип из семантики (например, для экранных читалок).

   • Пример:

     excludeFromSemantics: false // Включаем в семантику

9. Decoration? decoration

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

   • Пример:

     decoration: BoxDecoration(color: Colors.black, borderRadius: BorderRadius.circular(8.0)) // Черный фон с закругленными углами

10. TextStyle? textStyle

    • Описание: Стиль текста, отображаемого в тултипе.

    • Пример:

      textStyle: TextStyle(color: Colors.white, fontSize: 14.0) // Белый текст размером 14

11. TextAlign? textAlign

    • Описание: Выравнивание текста в тултипе.

    • Пример:

      textAlign: TextAlign.center // Центрируем текст

12. Duration? waitDuration

    • Описание: Время ожидания перед показом тултипа после наведения.

    • Пример:

      waitDuration: Duration(seconds: 1) // Ждем 1 секунду перед показом

13. Duration? showDuration

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

    • Пример:

      showDuration: Duration(seconds: 2) // Показываем тултип 2 секунды

14. Duration? exitDuration

    • Описание: Время, за которое тултип исчезает.

    • Пример:

      exitDuration: Duration(milliseconds: 300) // Тултип исчезает за 300 миллисекунд

15. bool enableTapToDismiss

    • Описание: Указывает, можно ли закрыть тултип нажатием на него.

    • Пример:

      enableTapToDismiss: true // Позволяем закрывать тултип нажатием

16. TooltipTriggerMode? triggerMode

    • Описание: Режим срабатывания тултипа (например, при наведении или при нажатии).

    • Пример:

      triggerMode: TooltipTriggerMode.tap // Срабатывает при нажатии

17. bool? enableFeedback

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

    • Пример:

      enableFeedback: true // Включаем звуковой отклик

18. void Function()? onTriggered

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

    • Пример:

      onTriggered: () {
        print('Тултип показан');
      }

19. Widget? child

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

    • Пример:

      child: Icon(Icons.info) // Иконка как дочерний элемент

Заключение

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