Хотите создать какой-то диалог в ответ на действие, но предоставленный класс Tooltip просто не делает этого за вас? Может быть, пора подумать о реализации OverlayEntry.

Что такое подсказка?

Всплывающая подсказка - это, как правило, статическая текстовая метка, которая появляется поверх чего-либо на вашем экране и дает больше информации о том, что это что-то делает. Некоторые виджеты поставляются из коробки с tooltip property, которое вы можете установить:

Например, FloatingActionButton поставляется с этим свойством и отображается, если пользователь долго нажимает на кнопку:

Без создания пользовательского FloatingActionButton для всплывающей подсказки не так много настроек. Дополнительное примечание: если вы хотите узнать, как настроить виджет Flutter, я написал статью, в которой показано, как это сделать здесь.

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

Tooltip(
    message: "Hi this is the standard tip",
    child: Text(
        'You have pushed the button this many times:',
   ),
),

Когда вы нажимаете и удерживаете текст, отображается заданное вами сообщение. Использование ToolTip дает вам гораздо больше параметров для настройки, таких как его высота, стиль, вертикальное смещение и продолжительность:

Переопределение Tooltip parameters по умолчанию может дать довольно индивидуальное сообщение:

Возможно, что-то из вышеперечисленного соответствует вашим потребностям, но если вы хотите добавить анимацию или показать всплывающую подсказку после другого жеста, мы можем сделать это самостоятельно, используя OverlayEntry.

Создание нашей специальной «подсказки»

Чтобы сделать то, что вы видите в верхнем видео, выполните следующие действия:

Сначала мы будем использовать виджет GestureDetector и поместить Text widget в качестве его дочернего элемента. Я хочу, чтобы эта подсказка появлялась, если пользователь дважды нажимает на текст, поэтому я собираюсь добавить onDoubleTap property:

Теперь давайте создадим наш реальный OverlayEntry. Создайте новый файл .dart и назовите его как хотите (мой называется hint_overlay.dart). В своем новом файле создайте новый StatefulWidget и назовите его в соответствии с вашими потребностями (мой называется HintOverlay). Пока вы там, добавьте реализацию SingleTickerProviderStateMixin (потому что она нам нужна для анимации) и методы initState и dispose :

Нам нужно HintOverlay , чтобы принять два параметра:

1. Ссылка на OverlayEntry , который HintOverlay будет вставлен в (entry)

2. Сообщение, которое будет отображаться как подсказка (message):

(Очевидно, вы можете установить столько параметров, сколько захотите, но вы поймете, почему нам нужна ссылка хотя бы на OverlayEntry passed in)

Я хочу, чтобы всплывающая подсказка отображалась в виде анимации - скольжения из правой части экрана в левую, поэтому я собираюсь добавить это AnimationController и Tween анимацию внутри initState HintOverlay:

Кроме того, я создаю таймер (_startTimer), который удалит OverlayEntry по истечении заданного времени. Я запущу его через initState и установлю его продолжительность на одну секунду больше, чем установлено для AnimationController, таким образом он удаляется после того, как он находится вне экрана:

Когда мы вызываем .remove() на OverlayEntry , который мы передали (widget.entry), dispose() будет активирован. Вот почему мы передаем эту ссылку.

Вернемся к main.dart файлу, мы должны создать фактический OverlayEntry и вернуть наш новый HintOverlay widget. После этого наше OnDoubleTap property вернет наш вставленный OverlayEntry.

Теперь, когда все настроено, мы можем дважды нажать на текст «Моя подсказка для ввода оверлея», и наша подсказка должна скользить по экрану в стиле выделения. И снова:

Этот тип подсказки / подсказки можно использовать для других целей, так как я использую этот стиль для создания наложений уведомлений для уведомлений в чате «хедз-ап» и т.п.

Здесь должно быть достаточно, чтобы вы двигались в своем собственном направлении. Если вам понадобится помощь, обратитесь ко мне.

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

Вот полный код файла main.dart и файла hint_overlay.dart (я удалил большую часть стандартного кода Flutter из main.dart):

Main.dart

hint_overlay.dart