In this article, you will learn about the DecorateBoxTransition widget in Flutter. You will learn the definition, its properties and its use case DecorateBoxTransition. Read the article for more insights.

2. DecoratedBoxTransition Widget – Definition,
Properties & How to Use It?
DecoratedBox Widget in Material Design paints a decoration onto
another box like a Container Widget that is a child of DecoratedBox.
Just like a DecoratedBox Widget Flutter has a new widget called
DecoratedBoxTransition Widget that is used for animating different
properties of its Decoration.

3. What is DecoratedBoxTransition Widget?
DecoratedBoxTransition Widget is an animated version of
a DecoratedBox that animates the different properties of
its Decoration.
Default Constructor for it will have a below code snippet.

4. In the above Constructor, all fields marked with required must not be
empty, so decoration and position must not be null in our constructor.
To implement the above widget or looking to build an outstanding
mobile business application, consult and hire best Flutter developers
from Flutter Agency.
const DecoratedBoxTransition(
{Key? key,
required Animation decoration,
DecorationPosition position = DecorationPosition.background,
required Widget child}
)

5. Properties:
Key: It controls how one widget replaces another widget in the tree.
A key is an identifier for Flutter Widgets, Elements,
and SemanticsNodes. A new widget will only be used to update an
existing element if its key is the same as the key of the current widget
associated with the element.
Animation<Decoration> Decoration: This attribute is used to
Animation of the decoration to paint. It can be created using a
DecorationTween interpolating typically between two BoxDecoration.

6. DecorationPosition Position: This attribute is used to define whether
to paint the box decoration behind or in front of the child.
Widget Child: The widget below this widget in the tree. It will have only
a one-child widget. To allocate multiple children users are requested to
use Row Widget or Column Widget and Wrap all the children into Row
Widget or Column Widget.

7. How to use DecoratedBoxTransition Widget?
The following code snippet tells us how to implement
DecoratedBoxTransition Widget in Flutter.
import 'package:flutter/material.dart';
class DecoratedBoxTransitionWidget extends StatefulWidget {
@override
_DecoratedBoxTransitionWidgetState createState() =>
_DecoratedBoxTransitionWidgetState();
}
class _DecoratedBoxTransitionWidgetState
extends State with TickerProviderStateMixin {

8. late AnimationController _controller;
bool _first = true;
final DecorationTween decorationTween = DecorationTween(
begin: BoxDecoration(
color: const Color(0xFFFFFFFF),
border: Border.all(
color: const Color(0xFF000000),
style: BorderStyle.solid,
width: 4.0,
),
borderRadius: BorderRadius.zero,
shape: BoxShape.rectangle,
boxShadow: const [
BoxShadow(
color: Color(0x66000000),
blurRadius: 10.0,
spreadRadius: 4.0,
)
],
),

9. end: BoxDecoration(
color: const Color(0xFF000000),
border: Border.all(
color: const Color(0xFF202020),
style: BorderStyle.solid,
width: 1.0,
),
borderRadius: BorderRadius.circular(10.0),
shape: BoxShape.rectangle,
// No shadow.
),
);
@override
initState() {
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
super.initState();
}

10. @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("DecoratedBoxTransition Examole"),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
DecoratedBoxTransition(
position: DecorationPosition.background,
decoration: decorationTween.animate(_controller),
child: Container(
width: 200,
height: 200,
padding: const EdgeInsets.all(20),
child: const FlutterLogo(),
),
),

11. const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
if (_first) {
_controller.forward();
} else {
_controller.reverse();
}
_first = !_first;
},
child: const Text(
"Click Me!",
),
)
],
),
),
);
}
}

12. Output Result

13. Conclusion
In this article, we have been through What
is DecoratedBoxTransition Widget in Flutter along with how to
implement it in a Flutter.
Hire a Flutter app development company for end-to-end solution in
Flutter mobile app development. Moreover, we are constantly
uploading stuffs about Flutter widgets, Flutter updates, Solutions,
etc. So, keep vising our portal and keep learning!!!
Source: https://flutteragency.com/decoratedboxtransition-
widget/