spotlight_ant 0.1.0 spotlight_ant: ^0.1.0 copied to clipboard
Spotlight the widget by wrapping it
SpotlightAnt
help focus on specific widget with highly flexible configuration.
This package is separated from my project POS-System.
Flexible | Auto Alignment | Animation |
---|---|---|
Play it yourself by visiting the web page.
Usage #
final ant1 = GlobalKey<SpotlightAntState>();
final ant2 = GlobalKey<SpotlightAntState>();
return Column(children: [
// this is the main ant with `ants`, we call it gaffer
SpotlightAnt(
key: ant1,
ants: [ant1, ant2], // only gaffer can set it
child: MyCircularButton(),
),
SpotlightAnt(
key: ant2,
// set the ants again here will build two spotlight shows.
spotlightBuilder: const SpotlightRectBuilder(),
child: MyRectButton(),
),
]);
It can also run by program:
TabBarView(
controller: _controller,
children: [
Container(),
SpotlightAnt(
key: _ant,
ants: [_ant],
child: Text('child'),
),
],
);
// ...
final desiredIndex = 1;
_controller.addListener(() {
if (!_controller.indexIsChanging) {
if (desiredIndex == _controller.index) {
_ant.show();
}
}
});
Configuration #
Every ant(no matter it is gaffer or not) share the configuration bellow:
Name | Default | Desc. |
---|---|---|
key | required | Created by GlobalKey<SpotlightAntState>() . |
enable | true |
- |
spotlightBuilder | SpotlightCircularBuilder |
Allow any builder from extends from SpotlightBuilder . |
spotlightPadding | EdgeInsets.all(8) |
- |
spotlightSilent | false |
Disable capture spotlight tap event. |
spotlightUsingInkwell | true |
Use GestureDetector if false. |
spotlightSplashColor | null |
- |
backdropSilent | false |
- |
backdropUsingInkwell | true |
- |
backdropSplashColor | null |
- |
actions | [SpotlightAntAction.skip] |
Actions showing in bottom, customize it by actionBuilder . |
actionBuilder | null |
- |
nextAction | null |
Change SpotlightAntAction.next default widget |
prevAction | null |
- |
skipAction | null |
- |
zoomInDuration | Duration(milliseconds: 600) |
- |
zoomOutDuration | Duration(milliseconds: 600) |
- |
bumpDuration | Duration(milliseconds: 500) |
Argument for AnimationController.repeat |
bumpRatio | 0.1 |
How big outer area you want in bump animation. |
content | null |
Content beside spotlight. |
contentAlignment | null |
Auto-detect it or specify it. |
contentFadeInDuration | Duration(milliseconds: 300) |
- |
onShown | null |
Callback before zoom in. |
onShow | null |
Callback after zoom in. |
onDismiss | null |
Callback before zoom out. |
onDismissed | null |
Callback after zoom out. |
child | required | The spotlight target. |
Only gaffer can set the configuration below:
Name | Default | Desc. |
---|---|---|
ants | null |
Set the ants for spotlight. |
showAfterInit | true |
If you want to fire it by program, set it to false |
showWaitFuture | null |
Pass the Future and it will wait until done and start the spotlight show. |
onSkip | null |
Callback after tapping SpotlightAntAction.skip . |
onFinish | null |
Callback after finish the show. |
Customize #
It can be easy to customize your painter:
class MyCustomSpotlightBuilder extends SpotlightBuilder {
@override
SpotlightPainter build(Rect target, double value, bool isBumping) {
// ...
}
@override
double inkwellRadius(Rect target) => 0;
}
class _Painter extends SpotlightPainter {
@override
/// The [size] should be the window's size
void paint(Canvas canvas, Size size) {
// ...
}
}
Actions is also easy too:
SpotlightAnt(
skipAction: TextButton.icon(
onPressed: () => gaffer.skip(),
label: const Text('MY Skip'),
icon: const Icon(Icons.arrow_forward_ios_sharp),
),
// ...
);