fade_and_translate

Description:

fade and translate

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';
copied to clipboard
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(),
);
copied to clipboard
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(),
);
copied to clipboard
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(),
);
copied to clipboard
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(),
);
copied to clipboard
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(),
);
copied to clipboard