DecoratedBoxTransition({ Key key, @required Animation<Decoration> decoration, DecorationPosition position: DecorationPosition.background, @required Widget child })
Animated version of a DecoratedBox
that animates the different properties of its Decoration
. Provide a Animation<Decoration>
object through decoration
properties like border width, border color, border radius, background color, background gradient, box shadow etc. You need to use DecorationTween
class to animate between two Decoration
values. Here is an example that changes its border width and its color:
class _TestState extends State<Test> with SingleTickerProviderStateMixin{ AnimationController controller; Animation<Decoration> decorationAnimation; @override initState(){ super.initState(); controller = new AnimationController( duration: Duration(milliseconds: 2000), vsync: this ); decorationAnimation = DecorationTween( begin: BoxDecoration( border: Border.all(color: Colors.black, width: 8), ), end: BoxDecoration( border: Border.all(color: Colors.pink, width: 28), ) ).animate( CurvedAnimation( parent: controller, curve: Curves.easeIn ) ); 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: Center( child: SizedBox( width: 200, height: 200, child: DecoratedBoxTransition( decoration: decorationAnimation, child: Container(), ), ), ), ), ] ) ); } }
The following DecorationTween
animates the border radius along with border width and its color:
decorationAnimation = DecorationTween( begin: BoxDecoration( border: Border.all(color: Colors.black, width: 8), borderRadius: BorderRadius.circular(30.0) ), end: BoxDecoration( border: Border.all(color: Colors.pink, width: 28), borderRadius: BorderRadius.circular(0.0) ) ).animate( CurvedAnimation( parent: controller, curve: Curves.easeIn ) );