What happens when we switch widgets?

Is there any animation? Did you change a Widget directly?

Something like this:

If so, the Widget mentioned today is definitely up your alley.

How to add special effects when switching widgets in Flutter? To achieve this effect?

AnimatedSwitcher.

AnimatedSwitcher

The official introduction

Without further ado, we already know the function, let’s take a look at the official introduction:

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 and key 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. To force the transition to occur, set a Key on each child widget that you wish to be considered unique (typically a ValueKey on the widget data that distinguishes this child from the others).

The general idea is:

The default is to animate transparently.

If the exchange rate is fast enough, multiple children exist, but they are removed when a new child is passed in.

If the new Widget and the old Widget have the same type and key, but different parameters, the conversion will not take place. If you want to convert, add a Key.

The constructor

Let’s look at constructors again to determine how to use them:

const AnimatedSwitcher({
  Key key,
  this.child,
  @required this.duration,
  this.reverseDuration,
  this.switchInCurve = Curves.linear,
  this.switchOutCurve = Curves.linear,
  this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder,
  this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder,
}) : assert(duration ! =null),
assert(switchInCurve ! =null),
assert(switchOutCurve ! =null),
assert(transitionBuilder ! =null),
assert(layoutBuilder ! =null),
super(key: key);
Copy the code

To explain each parameter:

  1. Child: Needless to say
  2. Duration: indicates the animation duration
  3. ReverseDuration: Animation duration from the new Widget to the old Widget, if not set to the value of duration
  4. SwitchInCurve: indicates the animation effect
  5. SwitchOutCurve: same as above
  6. TransitionBuilder: Sets a new transition animation
  7. LayoutBuilder: A component that wraps new and old widgets, a Stack by default

The required argument is a duration, so now that you know how to use it, start.

A simple example

In the previous diagram, we saw actions on the AppBar,

In fact, this example often exists in the actual development, must delete some things, and then selected later batch delete.

Here is no more to say, directly on the code, and then explain:

class _AnimatedSwitcherPageState extends State<AnimatedSwitcherPage> {
  IconData _actionIcon = Icons.delete;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('AnimatedSwitcherPage'),
          actions: <Widget>[
            AnimatedSwitcher(
              transitionBuilder: (child, anim){
                return ScaleTransition(child: child,scale: anim);
              },
              duration: Duration(milliseconds: 300),
              child: IconButton(
                  key: ValueKey(_actionIcon),
                  icon: Icon(_actionIcon),
                  onPressed: () {
                    setState(() {
                      if (_actionIcon == Icons.delete)
                        _actionIcon = Icons.done;
                      else_actionIcon = Icons.delete; }); }), ) ], ), body: Container()); }}Copy the code

We define a StatefulWidget because setState() is called when switching widgets,

Here’s the process:

  1. First, define the data of our initialized Icon asIcons.delete
  2. inAppBar 的 actionsTo join inAnimatedSwitcher
  3. Set up thetransitionBuilderFor zoom animationScaleTransition
  4. toAnimatedSwitcherThe child isIconButton
  5. As stated in the previous official documentation, if the widgets are of the same type but have different data, you must add a Key if you want to animate them.
  6. So we giveIconButtonAdd aValueKey, the value is definedIconData
  7. Finally, switch two ICONS in the click event to complete

One last look at the effect:

conclusion

The most important thing to remember with this control is the Key:

If the new Widget and the old Widget have the same type and key, but different parameters, the conversion will not take place. If you want to convert, add a Key.

The full code has been uploaded to GitHub: github.com/wanglu1209/…