A widget that paints a Decoration either before or after its child paints.
Container insets its child by the widths of the borders; DecoratedBox does not.
DecoratedBox is commonly used with BoxDecoration.
you can watch the video at
DecoratedBox({Key? key, required Decoration decoration, DecorationPosition position, Widget? child}) DecoratedBox( decoration: BoxDecoration( gradient: RadialGradient( center: Alignment(-0.5, -0.6), radius: 0.15, colors: <Color>[ Color(0xFFEEEEEE), Color(0xFF111133), ], stops: <double>[0.9, 1.0], ), ), position: DecorationPosition.background, child: FlutterLogo(size: 400)); position determines whether the decoration should be at foreground or background to the child.
The above decoration created a full moon with dark night background of FlutterLogo()
DecoratedBoxTransistion
Declare it in a statefulwidget and declare the DecorationTween.
final DecorationTween decorationTween = DecorationTween( begin: BoxDecoration( gradient: RadialGradient( center: Alignment(-0.5, -0.6), radius: 0.15, colors: <Color>[ Color(0xFFEEEEEE), Color(0xFF111133), ], stops: <double>[0.9, 1.0], ), ), end: BoxDecoration( gradient: RadialGradient( center: Alignment(-0.5, -0.6), radius: 0.15, colors: <Color>[ Colors.orange, Colors.cyan, ], stops: <double>[0.9, 1.0], ), )); Declare and intialize AnimationController
AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 5)) ..repeat(reverse: true); } @override void dispose() { _controller.dispose(); super.dispose(); } finally return DecorationBoxTransistion
child: DecoratedBoxTransition( position: DecorationPosition.background, decoration: decorationTween.animate(_controller), child: Container( width: 800, height: 1000, padding: EdgeInsets.all(10), child: Container()),),
Top comments (0)