AlignTransition({
Key key,
@required Animation<AlignmentGeometry> alignment,
@required Widget child,
double widthFactor,
double heightFactor
})
Animated version of an Align that animates its Align.alignment property. It has a alignment property that takes an Animation<AlignmentGeometry>. So create a animation of that type and pass it to the widget.
Below is an example that animates the alignment of the box:
class _TestState extends State<Test> with SingleTickerProviderStateMixin{
AnimationController controller;
Animation<AlignmentGeometry> alignmentAnimation;
@override
initState(){
super.initState();
controller = new AnimationController(
duration: Duration(milliseconds: 2000),
vsync: this
);
alignmentAnimation = Tween<AlignmentGeometry>(begin: Alignment(0, 0), end: Alignment(0, 1)).animate(
CurvedAnimation(
parent: controller,
curve: Curves.bounceIn
)
);
controller.repeat(reverse: true);
}
@override
dispose(){
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context){
return BeautyBackground(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
BackButton(),
Expanded(
child: AlignTransition(
alignment: alignmentAnimation,
child: Box(),
),
),
]
)
);
}
}
class Box extends StatelessWidget{
@override
Widget build(BuildContext context){
return SizedBox(
width: 100,
height: 100,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.red
),
child: SizedBox(
width: double.infinity,
height: double.infinity,
),
),
);
}
}