Clickable zone within a widget that activates an interactive overlay upon touch or hover.

Demo

Usage

To read more about classes and other references used by wx_anchor, see the API Reference.

Overlay Effect

WxAnchor has a default overlay effect that changes the opacity based on user interactions (focused, hovered, pressed, and disabled).

// Rectangle shape
WxAnchor(
  onTap: () {},
  padding: const EdgeInsets.symmetric(
    horizontal: 10,
    vertical: 6,
  ),
  borderRadius: BorderRadius.circular(5),
  child: const Text('Click Here'),
)

// Circle shape
WxAnchor.circle(
  onTap: () {},
  overlayRadius: 20, // overlay radius
  child: const Icon(Icons.chat),
)

Disable Overlay effect

WxAnchor(
  onTap: () {},
  overlay: false,
  child: const Text('Click Here'),
)

Customize Overlay Effect

// Changes overlay opacity based on user interaction
WxAnchor(
  onTap: () {},
  overlayColor: Colors.amber,
  focusedStyle: const WxAnchorStyle(overlayOpacity: 0.25),
  hoveredStyle: const WxAnchorStyle(overlayOpacity: 0.15),
  pressedStyle: const WxAnchorStyle(
    overlayOpacity: 0.25,
    overlayColor: Colors.red,
  ),
  borderRadius: BorderRadius.circular(15),
  child: const Icon(Icons.power_off),
)

// Changes overlay radius based on user interaction
WxAnchor.circle(
  onTap: () {},
  overlayRadius: 0,
  hoveredStyle: const WxAnchorStyle.circle(overlayRadius: 25),
  pressedStyle: const WxAnchorStyle.circle(overlayRadius: 20),
  child: const Icon(Icons.power_off),
)

Child Opacity & Scale

WxAnchor.circle(
  onTap: () {},
  opacity: 1,
  scale: 1,
  overlay: false,
  hoveredStyle: const WxAnchorStyle(opacity: .7, scale: 1.1),
  pressedStyle: const WxAnchorStyle(opacity: 1, scale: 1),
  child: const Icon(Icons.chat),
)

Sponsoring

If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.