1 / 13

DecoratedBoxTransition Widget – Definition, Properties & How to Use It

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.

Ruben8
Download Presentation

DecoratedBoxTransition Widget – Definition, Properties & How to Use It

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

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

  3. const DecoratedBoxTransition( {Key? key, required Animation decoration, DecorationPosition position = DecorationPosition.background, required Widget child} ) 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.

  4. 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.

  5. 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.

  6. 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 {

  7. late AnimationController _controller; bool _first = true; final DecorationTweendecorationTween = 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, ) ], ),

  8. 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(); }

  9. @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(), ), ),

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

  11. Output Result

  12. 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/

More Related