fade_and_translate 0.1.3

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(),
);