Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use AnimatedSwitcher to achieve scene switching animation in Flutter". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope that this article "how to use AnimatedSwitcher in Flutter to achieve scene switching animation" can help you solve the problem.

AnimatedSwitcher introduction

AnimatedSwitcher switches its subcomponents through dynamic effects, and the default effect is FadeTransition. When its subcomponents change, it will be converted according to the set transformation effect. The construction method of AnimatedSwitcher is 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,})

Unlike other animation components before, the parameters of AnimatedSwitcher are different except duration, as follows:

ReverseDuration: the reverse time, that is, the time it takes to switch to the old component, is the same as duration if it is not set.

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 construction, is a function, defined as follows, you can use this method to build your own switching dynamic effects.

Typedef AnimatedSwitcherTransitionBuilder = Widget Function (Widget child, Animation animation)

LayoutBuilder: you can set the layout of new components in the component tree, which is also a function:

Typedef AnimatedSwitcherLayoutBuilder = Widget Function (Widget? CurrentChild, List previousChildren)

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

Static Widget defaultLayoutBuilder (Widget? CurrentChild, List previousChildren) {return Stack (children: [. PreviousChildren, if (currentChild! = null) currentChild,], alignment: Alignment.center,);}

One thing to pay special attention to about AnimatedSwitcher is that if the two components you switch are the same, AnimatedSwitcher will assume that the components have not changed and will not switch dynamic effects. The documentation is as follows:

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

It's actually based on Widget's canUpdate:

Static int _ debugConcreteSubtype (Widget widget) {return widget is StatefulWidget? 1: widget is StatelessWidget? 2: 0;}

Therefore, if the two components are of the same type, you need to use different Key to distinguish them, usually using ValueKey.

Application

Let's start with the dynamic effect, which uses the SizeTransition size change dynamic effect to switch between the two images, which makes the size of the component change from small to large, with a sense 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 {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), child: AnimatedSwitcher (child: _ animatedWidget) Duration: const Duration (milliseconds: 1000), transitionBuilder: (child, animation) {return SizeTransition (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),);}) },),);}} this is the end of the introduction to "how to use AnimatedSwitcher to achieve scene switching animation in Flutter". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.