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