Tilt widget
Learn about Tilt widget parameters. Tilt widget only manages gesture, sensor, and animation state.
Tilt widget only manages gesture, sensor, and animation state (no UI rendering).
You can compose the Tilt container widget within the Tilt widget to wrap different effects.
Gesture priority
When multiple gestures are enabled, they are triggered based on priority:
Touch > Hover > Controller > Sensors
Tilt widget parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
child required | Widget | - | Create a widget in which its child widgets have the relevant tilt state. |
| tiltController | TiltController? | null | Controller for custom tilt input. |
| disable | bool | false | Disable all effects. |
| fps | int | 120 | Gesture triggered frames. |
| tiltConfig | TiltConfig | TiltConfig() | Tilt effect config. |
| onGestureMove | void Function(TiltDataModel, GesturesType)? | null | Gesture move callback. |
| onGestureLeave | void Function(TiltDataModel, GesturesType)? | null | Gesture leave callback. |
TiltController
final TiltController tiltController = TiltController();
...
void dispose() {
tiltController.dispose();
super.dispose();
}
...
/// Handle the "move" input event.
/// Should be used together with `leave` to indicate the end of the gesture.
tiltController.move(position: Offset(xx, xx));
/// Handle the "leave" input event.
/// Stop using the current gesture.
tiltController.leave(position: Offset(xx, xx));
| Parameter | Type | Default | Description |
|---|---|---|---|
position required | Offset | - | The current trigger position, It will have the tilt effect of the corresponding position. e.g. There is a widget size, width: 10, height: 10, (0, 0): Maximum tilt top left. (10, 10): Maximum tilt bottom right. |
| gesturesType | GesturesType | GesturesType.controller | Trigger gesture type. It is triggered according to the gesture priority. If you need to customize the control with animation or other means. Recommended use of GesturesType.controller. If other types are used for triggering, Then it will be affected by the configuration and effects associated with that type. e.g. When custom triggering GesturesType.sensors. If TiltConfig.enableSensorRevert is configured to be false, it will also not revert to the initial state. |
TiltConfig
| Parameter | Type | Default | Description |
|---|---|---|---|
| disable | bool | false | Only disable the tilt effect. |
| initial | Offset? | null | Initial tilt progress, range (x, y): (1, 1) to (-1, -1), you can exceed the range, but the maximum tilt angle during gesture movement is always tilted according to [TiltConfig.angle]. e.g. (0.0, 0.0) center (1.0, 1.0) Maximum tilt top left [TiltConfig.angle]. |
| angle | double | 10.0 | Maximum tilt angle. e.g. 180 will flip. |
| direction | List<TiltDirection>? | null | Tilt Direction, multiple directions, customized direction values. |
| enableReverse | bool | false | Tilt reverse, can be tilted up or down. |
| enableGestureSensors | bool | true | Gyroscope sensor triggered tilt. Only the following gestures: GesturesType.sensors |
| sensorFactor | double | 10.0 | Sensor trigger factor (sensitivity). Only the following gestures: GesturesType.sensors |
| enableSensorRevert | bool | true | Enable sensor tilt revert, will revert to the initial state. Only the following gestures: GesturesType.sensors |
| sensorRevertFactor | double | 0.05 | Sensor revert factor (damping), range of values: 0-1. Only the following gestures: GesturesType.sensors |
| sensorMoveDuration | Duration | Duration(milliseconds: 50) | Animation duration during sensor move. Only the following gestures: GesturesType.sensors |
| enableGestureHover | bool | true | Hover gesture triggered tilt. Only the following gestures: GesturesType.hover |
| enableGestureTouch | bool | true | Touch gesture triggered tilt. Only the following gestures: GesturesType.touch |
| enableRevert | bool | true | Enable tilt revert, will revert to the initial state. Only the following gestures: GesturesType.touch GesturesType.hover GesturesType.controller |
| enableOutsideAreaMove | bool | true | Tilt can continue to be triggered outside the area. Only the following gestures: GesturesType.touch GesturesType.controller |
| enterDuration | Duration | Duration(milliseconds: 1000) | Animation duration during gesture enter, must be used with [moveDuration] and [enterToMoveDuration]. Only the following gestures: GesturesType.touch GesturesType.hover |
| moveDuration | Duration | Duration(milliseconds: 100) | Animation duration during gesture move. Only the following gestures: GesturesType.touch GesturesType.hover |
| enterToMoveDuration | Duration | Duration(milliseconds: 600) | The duration of the transition from enter to move, must be used with [enterDuration] and [moveDuration]. Only the following gestures: GesturesType.touch GesturesType.hover |
| leaveDuration | Duration | Duration(milliseconds: 300) | Animation duration after gesture leave. Only the following gestures: GesturesType.touch GesturesType.hover |
| moveCurve | Curve | Curves.linear | Animation curve during gesture move. Only the following gestures: GesturesType.touch GesturesType.hover |
| enterToMoveCurve | Curve | Curves.easeOutCubic | The curve of the transition from enter to move, must be used with [enterToMoveDuration]. Only the following gestures: GesturesType.touch GesturesType.hover |
| leaveCurve | Curve | Curves.linear | Animation curve after gesture leave. Only the following gestures: GesturesType.touch GesturesType.hover |
| controllerMoveDuration | Duration | Duration(milliseconds: 100) | Animation duration during controller gesture move. Only the following gestures: GesturesType.controller |
| controllerLeaveDuration | Duration | Duration(milliseconds: 300) | Animation duration after controller gesture leave. Only the following gestures: GesturesType.controller |