wx_anchor

Description:

wx anchor

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),
)
copied to clipboard
Disable Overlay effect #
WxAnchor(
onTap: () {},
overlay: false,
child: const Text('Click Here'),
)
copied to clipboard
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),
)
copied to clipboard
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),
)
copied to clipboard
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.