Overlay demo

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text('demo')), body: AnchorExample()));
  }
}

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

  @override
  State<AnchorExample> createState() => _AnchorExampleState();
}

class _AnchorExampleState extends State<AnchorExample>
    with SingleTickerProviderStateMixin {
  final LayerLink _layerLink = LayerLink();
  OverlayEntry? _overlayEntry;
  late AnimationController _controller;
  late Animation<Offset> _animation;
  final GlobalKey buttonKey = GlobalKey();
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<Offset>(
      begin: const Offset(50, 100),
      end: const Offset(250, 400),
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  void _insertOverlay() {
    _overlayEntry?.remove();
    _overlayEntry = OverlayEntry(
      builder: (context) => Stack(
        children: [
          Positioned(
            child: CompositedTransformFollower(
              link: _layerLink,
              showWhenUnlinked: false,
              offset: const Offset(0, 50),
              child: Material(
                elevation: 4,
                color: Colors.transparent,
                child: Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  alignment: Alignment.center,
                  child: const Text(
                    'Overlay 1',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
    Overlay.of(context).insert(_overlayEntry!);
  }

  void _insertOverlay2() {
    _overlayEntry?.remove();
    final RenderBox? rendexBox =
        buttonKey.currentContext!.findRenderObject() as RenderBox?;
    final Offset offset = rendexBox!.localToGlobal(Offset.zero);
    _overlayEntry = OverlayEntry(
      builder: (context) => Stack(
        children: [
          Positioned(
            top: offset.dy + 50,
            left: offset.dx,
            child: Material(
              elevation: 4,
              color: Colors.transparent,
              child: Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(8),
                ),
                alignment: Alignment.center,
                child: const Text(
                  'Overlay 2',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
    Overlay.of(context).insert(_overlayEntry!);
  }

  @override
  void dispose() {
    _controller.dispose();
    _overlayEntry?.remove();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) => Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (_) => Scaffold(
                        appBar: AppBar(title: Text('Anchor demo page 2')))));
              },
              child: const Text('Go next page'),
            ),
          ),
          Positioned(
            top: 50,
            left: 0,
            child: ElevatedButton(
              onPressed: () {
                _controller.isAnimating
                    ? _controller.stop()
                    : _controller.repeat(reverse: true);
              },
              child: const Text('Play'),
            ),
          ),
          Positioned(
            top: 0,
            left: 150,
            child: ElevatedButton(
              onPressed: () {
                _insertOverlay2();
              },
              child: const Text('Insert Overlay 1'),
            ),
          ),
          Positioned(
            top: 0,
            left: 350,
            child: ElevatedButton(
              onPressed: () {
                _insertOverlay();
              },
              child: const Text('Insert Overlay 2'),
            ),
          ),
          Positioned(
            left: _animation.value.dx,
            top: _animation.value.dy,
            child: CompositedTransformTarget(
              link: _layerLink,
              child: ElevatedButton(
                key: buttonKey,
                onPressed: () {},
                child: const Text('Button'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}