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.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter