当前位置：网站首页>Flutter uses animatedswitcher to switch scenes

Flutter uses animatedswitcher to switch scenes

2022-07-19 13:30:00 【InfoQ】

Preface

In the application , We often encounter the scene of switching components , For example, after clicking a button , Change the current picture into another picture ; Or flip the card , Show card details . stay Flutter Provided in

AnimatedSwitcher

This animation component is used to realize the scene switching in the page .

AnimatedSwitcher Introduce

AnimatedSwitcher

Complete the switching of its sub components through dynamic effect , The default effect is

FadeTransition

. When its subcomponents change , It will be converted according to the set conversion effect .

AnimatedSwitcher

The construction method of 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,
})

Different from other animation components before ,

AnimatedSwitcher

Except for

duration

outside , Others are different , As follows ：

reverseDuration
： Reverse duration , That is, the duration of switching to the old component , If you don't set it, it's like
duration
Agreement .

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 , It's a function , The definition is as follows , You can use this method to build your own switching effect .

typedef AnimatedSwitcherTransitionBuilder = Widget Function(Widget child, Animation<double> animation);

layoutBuilder
： You can set the layout of new components in the component tree , It's also a function ：

typedef AnimatedSwitcherLayoutBuilder = Widget Function(Widget? currentChild, List<Widget> previousChildren);

The default layout is

defaultLayoutBuilder

, That is, the current component is placed at the top ：

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

About

AnimatedSwitcher

There is one place that needs special attention , That is, if the two components switched are the same ,

AnimatedSwitcher

You will think that the components have not changed , Without dynamic effect switching . 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

canUpdate

Judgmental ：

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

therefore , If two component types are the same , Need to use different

Key

To distinguish between , It is usually used

ValueKey

application

Now let's realize the dynamic effect of the beginning , This one uses

SizeTransition

Change the size, change the dynamic effect, and complete the switching of two pictures , This will increase the size of the component from small to large , There is a feeling 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) {
 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),
 );
 });
 },
 ),
 );
 }
}

summary

This article introduces

AnimatedSwitcher

Use of animation components .

AnimatedSwitcher

It can be used to switch and transition components in the interface , And can control the cut in and cut out time 、 Animation cancel 、 Transition effect and layout , Thus, some interesting switching effects can be realized . in addition , It should be noted that , If the sub components to be switched are of the same type , You need to use

Key

Distinguish , Otherwise, the dynamic effect will not appear .