Decorated Box Transition In Flutter (2024)

Whenever you will code for building anything in Flutter, it will be inside a widget. The focal design is to construct the application out of widgets. It depicts how your application view should look with its ongoing design and state. Right when you make any changes in the code, the widget adjusts its portrayal by working out the separation between the past and current widget to pick the unimportant changes for conveying in the UI of the application.

In Flutter, to assemble any application, we start with widgets. The building block of flutter applications. Widgets depict what their view ought to resemble given their ongoing setup and state. It consists of a text widget, line widget, segment widget, container widget, and some more.

In this article, we will explore the Decorated Box Transition In Flutter. We will implement the Decorated box transition demo program and learn how to use the same in your flutter applications.

Table Of Contents ::

Decorated Box Transition

Constructor

Properties

Code Implement

Code File

Conclusion

GitHub Link

Read my other blogs

DecoratedBoxTransition Widget is an animated version of a DecoratedBox that animates the different properties of its Decoration.

In Material Design, it paints an embellishment onto another box like a Container Widget that is an offspring of DecoratedBox. Very much like a DecoratedBox Widget Flutter has another widget called DecoratedBoxTransition Widget that is utilized for animating various properties of its decoration.

Demo Module :

This demo shows how the transition works in an app. It shows how the box transitions from one color to another by clicking on the button or by having it automated.

To utilize Decorated Box Transition, you need to call the constructor underneath:

const DecoratedBoxTransition(
{Key? key,
required Animation decoration,
DecorationPosition position = DecorationPosition.background,
required Widget child}
)

In Above Constructor all fields marked with @required must not be empty.

There are some properties of Decorated Box Transition:

• Animation<Decoration> Decoration: This attribute is used to animate the decoration to paint. It can be created using a DecorationTween interpolating typically between two BoxDecoration.
• 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.

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

First, we will create a screen that shows a box that is wrapped by the Decorated Box Transition widget and a button to toggle the transition on or off, and another button to fully automate the decorated box transition.

final DecorationTween decorationTween = DecorationTween(
 begin: BoxDecoration(
 color: Colors.white,
 border: Border.all(
 color: Colors.black45,
 style: BorderStyle.solid,
 width: 3.0,
 ),
 shape: BoxShape.circle,
 boxShadow: const [
 BoxShadow(
 color: Colors.black87,
 blurRadius: 10.0,
 spreadRadius: 4.0,
 )
 ],
 ),
 end: BoxDecoration(
 color: Colors.black,
 border: Border.all(
 color: Colors.black87,
 style: BorderStyle.solid,
 width: 1.0,
 ),
 shape: BoxShape.circle,
 // No shadow.
 ),
);

When we run the application, we ought to get the screen’s output like the underneath screen capture.

The automated screen needs to be separately coded using a similar box wrapped by the Decorated BoxTransition widget.

When we run the application, we ought to get the screen’s output like the underneath screen video.

import 'package:flutter/material.dart';
import 'package:flutter_decoratedbox_transition_example/splash_screen.dart';
import 'automatic.dart';
void main() {
 runApp(const MyApp());
}
class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
 return const MaterialApp(
 debugShowCheckedModeBanner: false,
 home: Splash(),
 );
 }
}
class DecoratedBoxTransitionWidget extends StatefulWidget {
 const DecoratedBoxTransitionWidget({Key? key}) : super(key: key);
 @override
 _DecoratedBoxTransitionWidgetState createState() =>
 _DecoratedBoxTransitionWidgetState();
}
class _DecoratedBoxTransitionWidgetState extends State
 with TickerProviderStateMixin {
 late AnimationController _animationController;
 bool _initial = true;
 final DecorationTween decorationTween = DecorationTween(
 begin: BoxDecoration(
 color: Colors.white,
 border: Border.all(
 color: Colors.black45,
 style: BorderStyle.solid,
 width: 3.0,
 ),
 shape: BoxShape.circle,
 boxShadow: const [
 BoxShadow(
 color: Colors.black87,
 blurRadius: 10.0,
 spreadRadius: 4.0,
 )
 ],
 ),
 end: BoxDecoration(
 color: Colors.black,
 border: Border.all(
 color: Colors.black87,
 style: BorderStyle.solid,
 width: 1.0,
 ),
 shape: BoxShape.circle,
 // No shadow.
 ),
 );
 @override
 initState() {
 _animationController = AnimationController(
 vsync: this,
 duration: const Duration(seconds: 1),
 );
 super.initState();
 }
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: const Text("Decorated Box Transition Example"),
 automaticallyImplyLeading: false,
 ),
 body: Center(
 child: Column(
 mainAxisSize: MainAxisSize.min,
 children: [
 DecoratedBoxTransition(
 position: DecorationPosition.background,
 decoration: decorationTween.animate(_animationController),
 child: Container(
 width: 300,
 height: 300,
 padding: const EdgeInsets.all(50),
 child: Opacity(
 opacity: 0.8,
 child: Image.asset(
 'assets/flutter.png',
 ),
 ),
 ),
 ),
 const SizedBox(
 height: 60,
 ),
 ElevatedButton(
 onPressed: () {
 if (_initial) {
 _animationController.forward();
 } else {
 _animationController.reverse();
 }
 _initial = !_initial;
 },
 child: const Text(
 "Tap To Change Transition!",
 ),
 ),
 const SizedBox(height: 40),
 ElevatedButton(
 onPressed: () {
 Navigator.of(context).push(
 MaterialPageRoute(
 builder: (context) => const HomePage(),
 ),
 );
 },
 child: const Text('Transition to Automatic Decorated Box'),
 )
 ],
 ),
 ),
 );
 }
}}

Conclusion:

In the article, I have explained the essential construction of the Decorated Box Transition widget in a flutter; you can alter this code as per your choice. This was a little introduction to the Decorated Box Transition widget on User Interaction from my side, and it's working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Decorated Box Transition widget in your flutter projects. We showed you what the Decorated Box Transition widget is, its constructor, and the properties of the Decorated Box Transition widget. We made a demo program for working Decorated Box Transition widget. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.