Динамичные подсказки в Flutter

Статья написана на основе другой статьи https://plugfox.dev/layer-link/ Здесь я, в большей степени для себя же, изложил более простой вариант, как «привязать» с помощью LayerLink один виджет к другому. Чтобы в дальнейшем было легче вспоминать.

И так, имеем некий список, который выводим, к примеру, через Column. Т.е. у нас есть List<WIdget>, который мы передаем в колумн. Высота каждого элемента-виджета неизвестна заранее.

И мы хотим к какому-либо виджету (к третьему) вывести небольшую подсказку. (В статье FOX’а описывается, как эти подсказки убирать по клику и т.п. Здесь же я запишу, как просто вывести. С чего начать, так сказать.)

Для простоты считаем, что у нас StatfullWidget. Вписываем ему реквизит:

final LayerLink _layerLink = LayerLink();

Этот _layerLink будет связывать «подсказку» и «элемент».

Заводим отдельный виджет-подсказку:

class PromtWidget extends StatelessWidget {

  const PromtWidget({

    Key? key,

  }) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return const Material(

        color: Colors.transparent,

        child: Text(

          ‘Подсказка’,

          style: TextStyle(color: Colors.white),

        ));

  }

}

В данном случае, это простой текст на прозрачном фоне. Сделать можно, почти что угодно: кнопку, картинку…

Далее нам нужна функция, которая будет показывать наш виджет-подсказку:

  void showOver() {

    Overlay.of(context)?.insert(

      _overlayEntry = OverlayEntry(

        builder: (context) => Positioned(

          height: 48,

          child: CompositedTransformFollower(

            link: _layerLink,

            offset: const Offset(-2, 4),

            targetAnchor: Alignment.bottomRight,

            followerAnchor: Alignment.topRight,

            showWhenUnlinked: false,

            child: const PromtWidget(),

          ),

        ),

      ),

    );

  }

Здесь мы используем Overlay для вывода поверх других виджетов. Позиционируем. В качестве ребенка указываем CompositedTransformFollower, у которого в link указываем созданный на первом шаге _layerLink.

И initState запускаем эту функцию, но после отрисовки основных виджетов:

   WidgetsBinding.instance.addPostFrameCallback((_) {

      showOver();

    });

Оборачиваем нужный элемент (по условию) в CompositedTransformTarget:

CompositedTransformTarget(

          link: _layerLink,

          child: ListElementWidget(element),

        )

Здесь мы опять же указываем в link нужный нам объект, а в качестве ребенка элемент списка (колумна).

Все легко и просто 🙂