spotlight_ant 1.4.3 copy "spotlight_ant: ^1.4.3" to clipboard
spotlight_ant: ^1.4.3 copied to clipboard

Spotlight the widget by wrapping it and with highly flexible configuration.

SpotlightAnt

codecov Codacy Badge Pub Version

SpotlightAnt helps focus on specific widget with highly flexible configuration.

This package is separated from my project POS-System.

Play it yourself by visiting the online demo page!

See more details in example.

Installation #

flutter pub add spotlight_ant
copied to clipboard

Usage #

There are two main widget: SpotlightShow and SpotlightAnt.

Each individual SpotlightAnt should with the SpotlightShow widget as a common ancestor of all of those. Call methods on SpotlightShowState to show, skip, finish, go next or previous SpotlightAnt that is a descendant of this SpotlightShow.

To obtain the SpotlightShowState, you may use SpotlightShow.of with a context whose ancestor is the SpotlightShow, or pass a GlobalKey to the SpotlightShow constructor and call GlobalKey.currentState.

Widget build(BuildContext context) {
  // Wrap all the SpotlightAnt by SpotlightShow.
  return SpotlightShow(child: Column(children: [
    SpotlightAnt(
      child: MyCircularButton(),
    ),
    SpotlightAnt(
      // Using rectangle spotlight to emphasize it.
      spotlightBuilder: const SpotlightRectBuilder(),
      content: Text('this is my content'),
      child: MyRectButton(),
    ),
  ]);
}
copied to clipboard

It can also be run by program:

TabBarView(
  controller: _controller,
  children: [
    Container(),
    SpotlightAnt(
      child: Text('child'),
    ),
  ],
);
// ...
final desiredIndex = 1;
_controller.addListener(() {
  if (!_controller.indexIsChanging) {
    if (desiredIndex == _controller.index) {
      // Get the SpotlightShow from descent context.
      SpotlightShow.of(context).start();
    }
  }
});
copied to clipboard

Configuration #

The configuration of SpotlightAnt:

Name Default Desc.
enable true Whether show this ant or not.
monitorId null Monitor widget's visibility and start the show after it shown, see example.
spotlight SpotlightConfig Customize spotlight.
backdrop SpotlightBackdropConfig Customize backdrop.
action SpotlightActionConfig Customize actions.
duration SpotlightDurationConfig Customize animation duration.
contentLayout SpotlightContentLayoutConfig Customize layout of content.
bumpRatio 0.1 How big outer area you want in bump animation.
traceChild false Trace the position of the child, see example.
index null Order in the show, see example.
content null Content beside spotlight.
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.

The configuration of SpotlightShow:

Name Default Desc.
enable true Wheather enable the show.
startWhenReady true If you want to fire it by program, set it to false.
waitForZeroOrNullIndex true Only start the show when the index <= 0 or null spotlight is registered.
hideNonOperableActions true Hide the action which is not operable.
showWaitFuture null Pass the Future and it will wait until it done and start the show.
onSkip null Callback after tapping SpotlightAntAction.skip.
onFinish null Callback after finish the show.
popAction SpotlightAntAction.skip Called action after pressing pop (aka BACK button in Android) button.
readinessChecker null A function to check whether the show is ready to start.

Go to API doc for details.

You can enable debug mode by:

SpotlightAnt.debug = true;
copied to clipboard

SpotlightConfig #

Configuration for the spotlight.

Name Default Desc.
builder SpotlightCircularBuilder Allow any builder that extends from SpotlightBuilder.
padding EdgeInsets.all(8) -
silent false Disable capturing spotlight's tap event which will stop show next spotlight.
onTap null Return SpotlightAction to determine what to do next, return null to do nothing.
usingInkwell true Use GestureDetector instead of Inkwell.
splashColor null Inkwell property.

SpotlightBackdropConfig #

Configuration for the backdrop.

Name Default Desc.
silent false Disable capturing backdrop's tap event which will start to show next spotlight.
onTap null Return SpotlightAction to determine what to do next, return null to do nothing.
usingInkwell true Use GestureDetector instead of Inkwell.
splashColor null Inkwell property.

SpotlightActionConfig #

Configuration for the actions.

Name Default Desc.
enabled [SpotlightAntAction.skip] Actions showing in bottom, customize it by SpotlightActionConfig.builder
builder null Build the actions wrapper
next null Change SpotlightAntAction.next default widget
prev null -
skip null -

SpotlightDurationConfig #

Configuration for the animation duration.

Name Default Desc.
zoomIn Duration(milliseconds: 600) -
zoomOut Duration(milliseconds: 600) -
bump Duration(milliseconds: 500) Argument for AnimationController.repeat
contentFadeIn Duration(milliseconds: 300) -

SpotlightContentLayoutConfig #

Configuration for the layout of content, see example.

Name Default Desc.
alignment null Auto-detect it or specify it.
prefer ContentPreferLayout.vertical Prefer content shown in which side.

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) {
    // ...
  }
}
copied to clipboard

Actions are also easy to customize:

SpotlightAnt(
  action: SpotlightActionConfig(
    skip: (cb) => TextButton.icon(
      onPressed: () => cb(),
      label: const Text('MY Skip'),
      icon: const Icon(Icons.arrow_forward_ios_sharp),
    ),
  ),
  // ...
);
copied to clipboard
13
likes
150
points
467
downloads

Publisher

unverified uploader

Weekly Downloads

2024.08.04 - 2025.02.16

Spotlight the widget by wrapping it and with highly flexible configuration.

Repository (GitHub)

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, visibility_detector

More

Packages that depend on spotlight_ant