Triangle tooltip

triangle_tooltip.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const TriangleTooltipWidget();
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Tooltip wraps the clipped area
    return Container(
      color: Colors.red,
      child: Tooltip(
        message: "Hovering the Triangle Shape",
        waitDuration: Duration.zero, // Instant feedback for testing
        child: ClipPath(
          clipper: TriangleClipper(),
          child: Container(
            width: 250,
            height: 250,
            decoration: const ShapeDecoration(
              color: Colors.teal,
              shape:
                  TriangleBorder(), // Container uses ShapeBorder as requested
            ),
            // MouseRegion ensures the clipped area is hit-test opaque
            child: const MouseRegion(hitTestBehavior: HitTestBehavior.opaque),
          ),
        ),
      ),
    );
  }
}

/// Defines the physical hit-testable boundary
class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()
      ..moveTo(size.width / 2, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

/// Defines the visual decoration for the Container
class TriangleBorder extends ShapeBorder {
  const TriangleBorder();

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) =>
      getOuterPath(rect);

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return Path()
      ..moveTo(rect.center.dx, rect.top)
      ..lineTo(rect.right, rect.bottom)
      ..lineTo(rect.left, rect.bottom)
      ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    // Optional: add a border stroke if desired
  }

  @override
  ShapeBorder scale(double t) => this;
}