https://github.com/davigmacode/flutter_wx_anchor
Clickable zone within a widget that activates an interactive overlay upon touch or hover.
https://github.com/davigmacode/flutter_wx_anchor
anchor flutter ui widgetarian
Last synced: 4 months ago
JSON representation
Clickable zone within a widget that activates an interactive overlay upon touch or hover.
- Host: GitHub
- URL: https://github.com/davigmacode/flutter_wx_anchor
- Owner: davigmacode
- License: bsd-3-clause
- Created: 2024-04-01T14:38:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-12T03:01:54.000Z (11 months ago)
- Last Synced: 2025-01-21T14:21:35.017Z (5 months ago)
- Topics: anchor, flutter, ui, widgetarian
- Language: Dart
- Homepage: https://pub.dev/packages/wx_anchor
- Size: 624 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://pub.dev/packages/wx_anchor)  [](https://www.buymeacoffee.com/davigmacode) [](https://ko-fi.com/davigmacode)
Clickable zone within a widget that activates an interactive overlay upon touch or hover.
[](https://davigmacode.github.io/flutter_wx_anchor)
[Demo](https://davigmacode.github.io/flutter_wx_anchor)
## Usage
To read more about classes and other references used by `wx_anchor`, see the [API Reference](https://pub.dev/documentation/wx_anchor/latest/).
### Overlay Effect
`WxAnchor` has a default overlay effect that changes the opacity based on user interactions (`focused`, `hovered`, `pressed`, and `disabled`).
```dart
// 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
```dart
WxAnchor(
onTap: () {},
overlay: false,
child: const Text('Click Here'),
)
```
### Customize Overlay Effect
```dart
// 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
```dart
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.