DecoratedBoxTransition class

Animated version of a DecoratedBox that animates the different properties of its Decoration.

Here's an illustration of the DecoratedBoxTransition widget, with it's decoration animated by a CurvedAnimation set to Curves.decelerate:

The following code implements the DecoratedBoxTransition as seen in the video above:

To create a local project with this code sample, run:
flutter create --sample=widgets.DecoratedBoxTransition.1 mysample

The following code implements the DecoratedBoxTransition as seen in the video above:

final DecorationTween decorationTween = DecorationTween(
  begin: BoxDecoration(
    color: const Color(0xFFFFFFFF),
    border: Border.all(style: BorderStyle.none),
    borderRadius: BorderRadius.circular(60.0),
    shape: BoxShape.rectangle,
    boxShadow: const <BoxShadow>[
      BoxShadow(
        color: Color(0x66666666),
        blurRadius: 10.0,
        spreadRadius: 3.0,
        offset: Offset(0, 6.0),
      )
    ],
  ),
  end: BoxDecoration(
    color: const Color(0xFFFFFFFF),
    border: Border.all(
      style: BorderStyle.none,
    ),
    borderRadius: BorderRadius.zero,
    // No shadow.
  ),
);

AnimationController _controller;

@override
void initState() {
  _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 3),
  )..repeat(reverse: true);
  super.initState();
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.white,
     child: Center(
       child: DecoratedBoxTransition(
         position: DecorationPosition.background,
         decoration: decorationTween.animate(_controller),
         child: Container(
           width: 200,
           height: 200,
           padding: const EdgeInsets.all(10),
           child: const FlutterLogo(),
         ),
       ),
     ),
   );
 }

Constructors

DecoratedBoxTransition({Key key, @required Animation<Decoration> decoration, DecorationPosition position: DecorationPosition.background, @required Widget child}): Creates an animated DecoratedBox whose Decoration animation updates the widget. [...]
const

Properties

child → Widget: The widget below this widget in the tree. [...]
final
decoration → Animation<Decoration>: Animation of the decoration to paint. [...]
final
hashCode → int: The hash code for this object. [...]
@nonVirtual, read-only, inherited
key → Key: Controls how one widget replaces another widget in the tree. [...]
final, inherited
listenable → Listenable: The Listenable to which this widget is listening. [...]
final, inherited
position → DecorationPosition: Whether to paint the box decoration behind or in front of the child.
final
runtimeType → Type: A representation of the runtime type of the object.
read-only, inherited

Methods

build(BuildContext context) → Widget: Override this method to build widgets that depend on the state of the listenable (e.g., the current value of the animation).
override
createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited
createState() → _AnimatedState: Subclasses typically do not override this method.
inherited
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String name, DiagnosticsTreeStyle style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.info}) → String: Returns a string representation of this object.
inherited
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug}) → String: Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object. [...]
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator. [...]
@nonVirtual, inherited

widgets library

DecoratedBoxTransition class

Constructors

Properties

Methods

Operators