AnimatedSwitcher class

A widget that by default does a FadeTransition between a new widget and the widget previously set on the AnimatedSwitcher as a child.

If they are swapped fast enough (i.e. before duration elapses), more than one previous child can exist and be transitioning out while the newest one is transitioning in.

If the "new" child is the same widget type as the "old" child, but with different parameters, then AnimatedSwitcher will not do a transition between them, since as far as the framework is concerned, they are the same widget, and the existing widget can be updated with the new parameters. If you wish to force the transition to occur, set a Key (typically a ValueKey taking any widget data that would change the visual appearance of the widget) on each child widget that you wish to be considered unique.

Sample code

class ClickCounter extends StatefulWidget {
  const ClickCounter({Key key}) : super(key: key);

  @override
  _ClickCounterState createState() => new _ClickCounterState();
}

class _ClickCounterState extends State<ClickCounter> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return new Material(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new AnimatedSwitcher(
            duration: const Duration(milliseconds: 200),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return new ScaleTransition(child: child, scale: animation);
            },
            child: new Text(
              '$_count',
              // Must have this key to build a unique widget when _count changes.
              key: new ValueKey<int>(_count),
              textScaleFactor: 3.0,
            ),
          ),
          new RaisedButton(
            child: new Text('Click!'),
            onPressed: () {
              setState(() {
                _count += 1;
              });
            },
          ),
        ],
      ),
    );
  }
}

See also:

Inheritance

Constructors

AnimatedSwitcher({Key key, Widget child, @required Duration duration, Curve switchInCurve: Curves.linear, Curve switchOutCurve: Curves.linear, AnimatedSwitcherTransitionBuilder transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder, AnimatedSwitcherLayoutBuilder layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder })
Creates an AnimatedSwitcher. [...]
const

Properties

child Widget
The current child widget to display. If there was a previous child, then that child will be cross faded with this child using a FadeTransition using the switchInCurve. [...]
final
duration Duration
The duration of the transition from the old child value to the new one.
final
layoutBuilder AnimatedSwitcherLayoutBuilder
A function that wraps all of the children that are transitioning out, and the child that's transitioning in, with a widget that lays all of them out. [...]
final
switchInCurve Curve
The animation curve to use when transitioning in child.
final
switchOutCurve Curve
The animation curve to use when transitioning the previous child out.
final
transitionBuilder AnimatedSwitcherTransitionBuilder
A function that wraps the new child with an animation that transitions the child in when the animation runs in the forward direction and out when the animation runs in the reverse direction. [...]
final
hashCode int
The hash code for this object. [...]
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited

Methods

createState() → _AnimatedSwitcherState
Creates the mutable state for this widget at a given location in the tree. [...]
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
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 toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) 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 ==(dynamic other) bool
The equality operator. [...]
inherited

Static Methods

defaultLayoutBuilder(List<Widget> children) Widget
The default layout algorithm used by AnimatedSwitcher. [...]
defaultTransitionBuilder(Widget child, Animation<double> animation) Widget
The default transition algorithm used by AnimatedSwitcher. [...]