animated_visibility
library
Classes
-
AnimatedTransition
-
-
AnimatedVisibility
-
AnimatedVisibility is a widget that animate the appearance and disappearance of its content, as visible value changes.
Different EnterTransitions and ExitTransitions can be defined in enter and exit for the appearance and disappearance animation.
There are 4 types of EnterTransition and ExitTransition: Fade, Expand/Shrink, Scale and Slide.
The enter transitions can be combined using +. Same for exit transitions.
The order of the combination does not matter, as the transition animations will start simultaneously.
See EnterTransition and ExitTransition for details on the four types of transition.
-
EnterTransition
-
EnterTransition defines how an AnimatedVisibility Widget appears on screen as it becomes visible.
The 4 categories of EnterTransitions available are:
-
EnterTransitionImpl
-
-
EnterTransitionNone
-
This can be used when no enter transition is desired.
-
ExitTransition
-
ExitTransition defines how an AnimatedVisibility Widget disappears from screen as it becomes invisible.
The 4 categories of ExitTransitions available are:
-
ExitTransitionImpl
-
-
ExitTransitionNone
-
This can be used when no exit transition is desired.
Note: If None is used, and nothing is animating in the Transition scope that AnimatedVisibility provided,
the content will be removed from AnimatedVisibility right away.
Functions
-
expandHorizontally({double initialFactor = 0.0, double alignment = 0.0, Curve curve = Curves.linear})
→ EnterTransition
-
This expands the content of the transition, from the specified initial factor (i.e. initialFactor) to 1f in terms of fraction of the transition's width.
By default, the content will expand from the center of the transition, and Curves.linear is used by default.
params:
-
expandVertically({double initialFactor = 0.0, double alignment = 0.0, Curve curve = Curves.linear})
→ EnterTransition
-
This expands the content of the transition, from the specified initial factor (i.e. initialFactor) to 1f in terms of fraction of the transition's height.
By default, the content will expand from the center of the transition, and Curves.linear is used by default.
params:
-
fadeIn({double initialAlpha = 0.0, Curve curve = Curves.linear})
→ EnterTransition
-
This fades in the content of the transition, from the specified starting alpha (i.e. initialAlpha) to 1f.
initialAlpha defaults to 0f, and Curves.linear is used by default.
Params:
-
fadeOut({double targetAlpha = 0.0, Curve curve = Curves.linear})
→ ExitTransition
-
This fades out the content of the transition, from full opacity to the specified target alpha (i.e. targetAlpha).
By default, the content will be faded out to fully transparent (i.e. targetAlpha defaults to 0), and Curves.linear is used by default.
Params:
-
scaleIn({double initialScale = 0.0, Alignment alignment = Alignment.center, Curve curve = Curves.linear})
→ EnterTransition
-
This scales in the content of the transition, from the specified initial scale (i.e. initialScale) to 1f.
By default, the content will scale in from the center of the transition, and Curves.linear is used by default.
-
scaleOut({double targetScale = 0.0, Alignment alignment = Alignment.center, Curve curve = Curves.linear})
→ ExitTransition
-
This scales out the content of the transition, from full scale to the specified target scale (i.e. targetScale).
By default, the content will be scaled out to 0f, and Curves.linear is used by default.
-
shrinkHorizontally({double targetFactor = 0.0, double alignment = 0.0, Curve curve = Curves.linear})
→ ExitTransition
-
This shrinks out the content of the transition, to targetFactor defined in terms of fraction of the transition's width.
By default, the content will shrink out to 0f, and Curves.linear is used by default.
params:
-
shrinkVertically({double targetFactor = 0.0, double alignment = 0.0, Curve curve = Curves.linear})
→ ExitTransition
-
This shrinks out the content of the transition, to targetFactor defined in terms of fraction of the transition's height.
By default, the content will shrink out to 0f, and Curves.linear is used by default.
params:
-
slideIn({Offset initialOffset = const Offset(1.0, 1.0), Curve curve = Curves.linear})
→ EnterTransition
-
This slides in the content of the transition, from the specified initial offset (i.e. initialOffset) to Offset.zero.
The offset is defined in terms of fractions of the transition's size.
-
slideInHorizontally({double initialOffsetX = 1.0, Curve curve = Curves.linear})
→ EnterTransition
-
This slides in the content horizontally, from a starting X defined in terms of fractions of the transition's width.
By default, the content will slide in from the right of the transition, and Curves.linear is used by default.
The direction of the slide can be controlled by configuring the initialOffsetX.
A positive value means sliding from right to left, whereas a negative value would slide the content from left to right.
Params:
-
slideInVertically({double initialOffsetY = 1.0, Curve curve = Curves.linear})
→ EnterTransition
-
This slides in the content vertically, from a starting offset defined in terms of fractions of the transition's height.
By default, the content will slide in from the bottom of the transition, and Curves.linear is used by default.
The direction of the slide can be controlled by configuring the initialOffsetY.
A positive value means sliding from bottom to top, whereas a negative value would slide the content from top to bottom.
Params:
-
slideOut({Offset targetOffset = const Offset(1.0, 1.0), Curve curve = Curves.linear})
→ ExitTransition
-
This slides out the content of the transition, from an offset of IntOffset(0, 0) to the target offset defined in targetOffset.
The offset is defined in terms of fractions of the transition's size.
By default, the content will slide out to the bottom right corner of the transition, and Curves.linear is used by default.
-
slideOutHorizontally({double targetOffsetX = 1.0, Curve curve = Curves.linear})
→ ExitTransition
-
This slide out content horizontally, to the target x defined in terms of fractions of the transition's width.
By default, the content will slide out to the right, and Curves.linear is used by default.
The direction of the slide can be controlled by configuring the targetOffsetX.
A positive value means sliding to the right, whereas a negative value would slide the content towards the left.
params:
-
slideOutVertically({double targetOffsetY = 1.0, Curve curve = Curves.linear})
→ ExitTransition
-
This slide out content vertically, to the targetOffset y defined in terms of fractions of the transition's height.
By default, the content will slide out to the bottom, and Curves.linear is used by default.
The direction of the slide can be controlled by configuring the targetOffsetY.
A positive value means sliding down, whereas a negative value would slide the content upwards.
params:
