How to use OverlayPortal

readme.md

How to use OverlayPortal

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

/// Flutter code sample for [OverlayPortal].

void main() => runApp(const OverlayPortalExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('OverlayPortal Example')),
        body: const Center(child: ClickableTooltipWidget()),
      ),
    );
  }
}

class ClickableTooltipWidget extends StatefulWidget {
  const ClickableTooltipWidget({super.key});

  @override
  State<StatefulWidget> createState() => ClickableTooltipWidgetState();
}

class ClickableTooltipWidgetState extends State<ClickableTooltipWidget> {
  final OverlayPortalController _tooltipController = OverlayPortalController();
  final LayerLink _layerLink = LayerLink();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: CompositedTransformTarget(
        link: _layerLink,
        child: TextButton(
          onPressed: _tooltipController.show,
          child: DefaultTextStyle(
            style: DefaultTextStyle.of(context).style.copyWith(fontSize: 50),
            child: OverlayPortal(
              controller: _tooltipController,
              overlayChildBuilder: (BuildContext context) {
                return Container(
                  color: Colors.blue.withAlpha(80),
                  child: Row(
                    children: [
                      CompositedTransformFollower(
                        showWhenUnlinked: false,
                        targetAnchor: Alignment.topCenter,
                        followerAnchor: Alignment.bottomCenter,
                        link: _layerLink,
                        child: ColoredBox(
                            color: Colors.amberAccent,
                            child: TextButton(
                              onPressed: _tooltipController.hide,
                              child: const Text('tooltip'),
                            ),
                          ),
                      ),
                    ],
                  ),
                );
              },
              child: const Text('Press to show/hide tooltip'),
            ),
          ),
        ),
      ),
    );
  }
}