bounce

Description:

bounce

Bounce #

This package adds a new Bounce widget that applies a tap-triggered bounce animation to Flutter widgets. Depending on the touch location, a tilt effect is also added on the child.

To see examples of the following effect on a device or simulator:
cd example/
flutter run --release
copied to clipboard
How to use #
First, add the dependency to your pubspec.yaml file:
dependencies:
bounce: ^<latest-version>
copied to clipboard
Then, wrap your target widget as child of a Bounce widget. You may optionally specify additional behavior, such as disabling the tilt effect by adding tilt: false to the constructor. The simplest usage of this widget is the following :

import 'package:bounce/bounce.dart';

...

return Bounce(
onTap: () {
// ...
},
child: ...)

copied to clipboard
Custom behavior #
Tilt effect #
You may specify the maximum angle applied by the tilt effect using the tiltAngle. This angle will be reached when the child widget is tapped at its edges. No tilt is applied when the child is tapped exactly at its center.
Scale effect #
You may specify the maximum factor applied by the scale effect using the scaleFactor parameter.
Tap delay #
To fine tune your user experience, you may want the various effects to animate back for a few milliseconds after the tap has occured. By default, this delay is set to 150 milliseconds.
Filter quality #
The Bounce widget implementation wraps the child with a matrix-based Transform widget. On most platforms, it is a good practice to have it set to FilterQuality.high, which is the default value. You may specify other FilterQuality values directly from the widget's constructor :
Bounce(
filterQuality: FilterQuality.medium,
child: ...
)
copied to clipboard
Due to limitations on Safari iOS and if your app targets it, you are responsible for enforcing filterQuality to null in this specific browser.
Combination with Motion widgets #
Bounce widgets look gorgeous when combined with a Motion widget, like so :
Motion(
child: Bounce(
child: ...
)
)
copied to clipboard
Here is an interaction example :

Comparing different tilt angles
Issues #
If you are having any problem with the Bounce package, you can file an issue on the package repo's issue tracker.
Please make sure that your concern hasn't already been addressed in the 'Closed' section.
Credits #
This package was developed with ♥ by @mrcendre.