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:

Only gaffer can set the configuration below:

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),
  ),
  // ...
);