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
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(),
),
),
),
);
}
See also:
- DecoratedBox, which also draws a Decoration but is not animated.
- AnimatedContainer, a more full-featured container that also animates on decoration using an internal animation.
- Inheritance
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- AnimatedWidget
- DecoratedBoxTransition
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