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)