Сегодня немного о том, как улучшить UI-опыт в ваших Flutter web-приложениях.
Порой даже в самом продуманном интерфейсе нужны подсказки.
Допустим, у вас есть кнопка: иконка вроде есть, но… что она делает? Чтобы закрыть такие «дыры» в UX во Flutter есть такой виджет как Tooltip. Вроде мелочь, но при помощи одной лишь строчки вы заметно улучшите опыт пользователя.
Tooltip — это всплывающая подсказка, которая появляется:
✔️ при долгом тапе на мобильных устройствах
✔️при наведении курсора в вебе и на десктопе
Например, это может быть полезно:
▫️ для иконок без текста
▫️ для кнопок с непонятным назначением
Tooltip реализован через Overlay, чтобы подсказка могла отображаться поверх всех виджетов. Он отслеживает действие и вставляет в Overlay анимированный контейнер с текстом.
Положение, задержка и продолжительность отображения настраиваются через waitDuration, showDuration и другие параметры.
Базовое использование:
Tooltip(
message: 'Добавить',
child: Icon(Icons.add),
)
Но на этом не все, вы также можете его кастомизировать: задать фон, стили, задержки и даже использовать rich-контент.
Tooltip(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
),
richMessage: WidgetSpan(
alignment: PlaceholderAlignment.baseline,
baseline: TextBaseline.alphabetic,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: maxWidth),
child: Text(
message,
style: Theme.of(context).textTheme.bodySmall,
),
),
),
),
child: const InfoIcon(isOutline: true, size: 20),
);
Некоторые виджеты уже встроенно поддерживают тултипы. Например, IconButton.
IconButton(
icon: Icon(Icons.search),
tooltip: 'Поиск',
onPressed: () {},
)
❕При использовании tooltip не стоит перебарщивать. Добавляйте подсказки только в те места, где это действительно необходимо! Не надо дублировать то, что и так ясно.
Если вам хочется больше контроля, то можете сделать собственный тултип через OverlayEntry. Об это был пост.
Если было полезно — ❤️