Transform follower sample

follower.dart

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Scaffold(body: Center(child: FollowerPortalExample()))));

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

  @override
  State<FollowerPortalExample> createState() => _FollowerPortalExampleState();
}

class _FollowerPortalExampleState extends State<FollowerPortalExample> {
  // 1. Create the LayerLink and the OverlayPortalController
  final LayerLink _layerLink = LayerLink();
  final OverlayPortalController _tooltipController = OverlayPortalController();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 2. Wrap your target widget structure in an OverlayPortal
        OverlayPortal(
          controller: _tooltipController,
          // This builds the floating child when controller.toggle() or show() is called
          overlayChildBuilder: (BuildContext context) {
            return CompositedTransformFollower(
              link: _layerLink,
              showWhenUnlinked: false,
              // Aligns the follower's top-left to the target's bottom-left
              targetAnchor: Alignment.bottomLeft, 
              child: Align(
                alignment: Alignment.topLeft,
                child: Material(
                  elevation: 4.0,
                  child: Container(
                    width: 200, // Or dynamically passed down
                    color: Colors.amber[100],
                    child: ListView(
                      padding: EdgeInsets.zero,
                      shrinkWrap: true,
                      children: const [
                        ListTile(title: Text('Option 1')),
                        ListTile(title: Text('Option 2')),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
          // 3. The target widget itself acts as the anchor child
          child: CompositedTransformTarget(
            link: _layerLink,
            child: ElevatedButton(
              onPressed: () {
                // Declaratively toggle the overlay visibility
                _tooltipController.toggle();
              },
              child: const Text('Toggle Floating Menu'),
            ),
          ),
        ),
      ],
    );
  }
}