fade_and_translate 0.1.3
fade_and_translate: ^0.1.3 copied to clipboard
A widget that toggles the visibility of its child by simultaneously fading the child in or out while translating its positional offset.
fade_and_translate #
A widget that toggles the visibility of its child by simultaneously fading the child in or out while translating its positional offset.
Usage #
import 'package:fade_and_translate/fade_and_translate.dart';
fade_and_translate consists of a single widget, [FadeAndTranslate], which has a binary state of being visible or hidden that's controlled by the parent.
[FadeAndTranslate] has two required parameters: [child] and [translate], which specifies the offset to translate the child to and from.
Visibility & Duration #
[FadeAndTranslate]'s [child] is visible by default. The transition can be triggered by changing the [visible] parameter.
The duration of the transition can be specified by the [duration] parameter,
which defaults to Duration(milliseconds: 120)
.
/// Builds a widget that's hidden and will transition
/// in when [visible] is set to `true`.
FadeAndTranslate(
visible: false,
translate: Offset(0.0, 20.0),
child: MyWidget(),
);
/// Builds a widget that's visible by default and will transition to
/// being hidden when [visible] is set to `false`. The transition will
/// take 240ms to complete.
FadeAndTranslate(
visible: true,
translate: Offset(0.0, 20.0),
duration: Duration(milliseconds: 240),
child: MyWidget(),
);
Auto-start #
[FadeAndTranslate] has a parameter, [autoStart], that will start the transition
automatically once the widget has been built. If [autoStart] is true
, the widget
will start in the state opposite of [visible] and transition to the state defined
by [visible].
/// Builds a widget that starts out hidden and transitions to being
/// visible as soon as it's built.
FadeAndTranslate(
autoStart: true,
translate: Offset(0.0, 20.0),
child: MyWidget(),
);
Delays #
Both the transition toggled by [visible] and one triggered by [autoStart] can be set to start at a delay from when they've been triggered.
The [delay] parameter is used to specify the [Duration] which to delay the transition togged by [visible], and [autoStartDelay] can be set to delay the [autoStart]'s transition. If [delay] is set and [autoStartDelay] is not, [autoStartDelay] will inherit [delay]'s [Duration].
/// Changing this value will toggle the transitions of all the below widgets.
var _visible = true;
/// Builds a widget that will start its transition 120ms
/// after [_visible] has been toggled.
FadeAndTranslate(
visible: _visible,
delay: Duration(milliseconds: 120),
translate: Offset(0.0, 20.0),
child: MyWidget(),
);
/// Builds a widget that will transition to the state of [_visible] 120ms
/// after its been built, and will immediately transition when [_visible]
/// is toggled.
FadeAndTranslate(
visible: _visible,
autoStartDelay: Duration(milliseconds: 120),
autoStart: true,
translate: Offset(0.0, 20.0),
child: MyWidget(),
);
/// Builds a widget that will immediately transition to the state of [_visible]
/// once it's been built, and will transition 120ms after [_visible] has been
/// toggled.
FadeAndTranslate(
visible: _visible,
delay: Duration(milliseconds: 120),
autoStartDelay: Duration.zero,
autoStart: true,
translate: Offset(0.0, 20.0),
child: MyWidget(),
);
Animation Curves #
An animation curve can be set with the [curve] parameter. The curve will be applied to both the opacity and the offset animations.
Any of the curves defined in Flutter's [Curves] utility class can be used, or you can build a curve yourself.
/// Builds a widget with a curved tween.
FadeAndTranslate(
visible: _visible,
translate: Offset(0.0, 20.0),
curve: Curves.easeIn,
child: MyWidget(),
);
Callbacks #
[FadeAndTranslate] has four callbacks: [onStart] and [onComplete], which are called when a transition starts and ends, respectively; [onDismissed] and [onCompleted], which are called when the status of the transition animation has reached [AnimationStatus.dismissed] and [AnimationStatus.completed], respectively.
/// Builds a widget with callbacks that note the state of the transition.
FadeAndTranslate(
visible: _visible,
translate: Offset(0.0, 20.0),
onStart: () => print('Starting the transition.'),
onComplete: () => print('The transition has finished.'),
onDismissed: () => print('The transition has returned to its original state.'),
onCompleted: () => print('The transition has finished changing states.'),
child: MyWidget(),
);