Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

In the application, we often encounter the scene of switching components, such as clicking a button to change the current picture to another picture; Or flip the card to display the card details. The AnimatedSwitcher component is provided in Flutter to switch scenes within the page.

AnimatedSwitcher introduction

AnimatedSwitcher switches its subcomponents using dynamic effects. The default effect is FadeTransition. When the child component changes, it is converted according to the set transformation effect. AnimatedSwitcher is constructed as follows:

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,
})
Copy the code

Different from other animation components before, AnimatedSwitcher parameters are different except duration, as follows:

  • reverseDuration: Reverse duration, that is, the switchover duration of the old componentdurationConsistent.
  • switchInCurve: Cut into the animation curve, that is, the curve into which the new component switches;
  • switchOutCurve: Cut out the animation curve, that is, the curve when the old component is switched out;
  • transitionBuilder: Toggle transition animation build, is a function, defined as follows, you can use this method to build your own toggle animation.
typedef AnimatedSwitcherTransitionBuilder = Widget Function(Widget child, Animation<double> animation);
Copy the code
  • layoutBuilder: sets the layout of the new component in the component tree, which is also a function:
typedef AnimatedSwitcherLayoutBuilder = Widget Function(Widget? currentChild, List<Widget> previousChildren);
Copy the code

The default layout is defaultLayoutBuilder, which places the current component at the top:

static Widget defaultLayoutBuilder(Widget? currentChild, List<Widget> previousChildren) {
  return Stack(
    children: <Widget>[
      ...previousChildren,
      if(currentChild ! =null) currentChild,
    ],
    alignment: Alignment.center,
  );
}
Copy the code

One important thing to note about the AnimatedSwitcher is that if two components are the same, the AnimatedSwitcher will assume that the component has not changed and will not perform the switch. The documentation is as follows:

The child is considered to be “new” if it has a different type or [Key]

This is actually determined by the Widget’s canUpdate:

static int _debugConcreteSubtype(Widget widget) {
  return widget is StatefulWidget ? 1 :
         widget is StatelessWidget ? 2 :
         0;
}
Copy the code

Therefore, if two components are of the same type, they need to be distinguished by different keys, usually ValueKey.

application

Now let’s do the initial motion effect, and this one uses SizeTransition to switch between two images, so that the size of the component goes from small to large, kind of lifting the veil. The code is as follows:

class AnimatedSwitcherDemo extends StatefulWidget {
  AnimatedSwitcherDemo({Key? key}) : super(key: key);

  @override
  _AnimatedSwitcherDemoState createState() => _AnimatedSwitcherDemoState();
}

class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> {
  Widget? _animatedWidget;
  bool test = false;

  @override
  void initState() {
    super.initState();
    _animatedWidget = ClipOval(
      child: Image.asset('images/beauty.jpeg'),
      key: ValueKey(1)); }@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedSwticher'),
        brightness: Brightness.dark,
        backgroundColor: Colors.black,
      ),
      backgroundColor: Colors.black,
      body: Center(
        child: Container(
          padding: EdgeInsets.all(10.0),
          child: AnimatedSwitcher(
            child: _animatedWidget,
            duration: const Duration(milliseconds: 1000),
            transitionBuilder: (child, animation) {
              returnSizeTransition( sizeFactor: animation, child: child, ); }, ), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.play_arrow), onPressed: () { setState(() { test = ! test; _animatedWidget = test ? ClipOval( child: Image.asset('images/beauty2.jpeg'),
                    key: ValueKey(2),
                  )
                : ClipOval(
                    child: Image.asset('images/beauty.jpeg'),
                    key: ValueKey(1)); }); },),); }}Copy the code

conclusion

This article introduces the use of the AnimatedSwitcher animation component. AnimatedSwitcher can be used to switch between components in the interface, and can control the duration of cutting and cutting, animation cancel, transition effects, and layout, which can achieve some interesting switching effects. In addition, it is important to note that if the subcomponents to be switched are of the same type, they need to be distinguished by keys; otherwise, the dynamic effects will not appear.

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder. If you feel you have something to gain, please give three pairs of love as follows:

👍🏻 : a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!