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

This article mainly introduces the relevant knowledge of "how Flutter uses AnimatedBuilder to achieve dynamic reuse". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how Flutter uses AnimatedBuilder to achieve dynamic reuse" can help you solve the problem.

Preface

We talked about two ways to build animation, Animation and AnimationWidget, both of which are built by components and animation together. Sometimes we just want to reuse dynamic effects and don't care about component building, so we can use AnimatedBuilder.

AnimatedBuilder introduction

According to the official documentation, the main points for using AnimatedBuilder are as follows:

An AnimatedBuilder understands how to render the transition. -- AnimatedBuilder knows how to render transition effects.

An AnimatedBuilder doesn't know how to render the widget, nor does it manage the Animation object. -- AnimatedBuilder does not know (or should not be) how to render components, nor does it manage component objects.

Use AnimatedBuilder to describe an animation as part of a build method for another widget. If you simply want to define a widget with a reusable animation, use an AnimatedWidget. Use AnimatedBuilder as the dynamic effect description of other components. If you just want to reuse a component with dynamic effects, you should use AnimatedWidget. This can be seen in our previous introduction to AnimatedWidget: introduction to Flutter and practice (94): give your components 3D dynamic effects.

Examples of AnimatedBuilders in the Flutter API: BottomSheet, ExpansionTile, PopupMenu, ProgressIndicator, RefreshIndicator, Scaffold, SnackBar, TabBar, TextField. In Flutter, there are many components that use AnimatedBuilder to build dynamic effects.

The core point of this passage is that AnimatedBuilder should only be responsible for managing animation effects, not component builds. If you mix it together, you will lose the original intention of the designer. This is like our state management and interface, one responsible for business logic, the other responsible for interface rendering, thus achieving decoupling and reuse. This AnimatedBuilder is dedicated to replication dynamic management, and efforts should be made to achieve reuse. AnimatedBuilder is defined as follows:

Const AnimatedBuilder ({Key? Key, required Listenable animation, required this.builder, this.child,}): assert (animation! = null), assert (builder! = null), super (key: key, listenable: animation)

The key parameter is the transformation action used by builder,builder to build the component. In builder, you can transform the sub-component to be rendered, and then return the transformed component. Builder is defined as follows, where child is actually the child parameter of AnimatedBuilder, which can be used as needed.

Widget Function (BuildContext context, Widget? Child) introduction to Transform components

In Flutter, a special transformation operation for subcomponents is provided, defined as follows:

Const Transform ({Key? Key, required this.transform, this.origin, this.alignment, this.transformHitTests = true, Widget? Child,}): assert (transform! = null), super (key: key, child: child)

The parameters here are described as follows:

Transform is a Matrix4 object that defines transformation operations in 3D space.

Origin is a coordinate offset that is actually added to the translation (translation) of Matrix4.

Alignment: that is, the reference direction in which the change takes place.

Child: the subcomponent to be converted.

We can realize the dynamic effect management of AnimatedBuilder through Transform, that is, in AnimatedBuilder, we can achieve dynamic effect by building Transform objects.

Application

The basic concepts are clear (knock on the blackboard: most of the time you start to use it after a simple look at the document, or even simply copy the sample code, which is likely to be used incorrectly), and you can start to play with the code. Let's achieve the following dynamic effects.

Here are actually two components that are converted into dynamic effects through AnimatedBuilder. Half of the time in the dynamic effect is the text "Click the button to make a little sister", and the next half replace the component with a picture of the little sister. The implementation code for using AnimatedBuilder is as follows:

Class RotationSwitchAnimatedBuilder extends StatelessWidget {final Widget child1, child2; final Animation animation; const RotationSwitchAnimatedBuilder ({Key? Key, required this.animation, required this.child1, required this.child2}): super (key: key); @ override Widget build (BuildContext context) {return AnimatedBuilder (animation: animation, builder: (context, child) {if (animation.value)

< 0.5) { return Transform( transform: Matrix4.identity() ..rotateZ(animation.value * pi) ..setEntry(0, 1, -0.003), alignment: Alignment.center, child: child1, ); } else { return Transform( transform: Matrix4.identity() ..rotateZ(pi) ..rotateZ(animation.value * pi) ..setEntry(1, 0, 0.003), child: child2, alignment: Alignment.center, ); } }, ); }} 注意第2个组件多转了180度，是未来保证停止后正好旋转360度，以免图片倒过来。另外就是这里的 child1和 child2也可以修改为使用 WidgetBuilder 函数来在需要的时候再构建组件。使用这个RotationSwitchAnimatedBuilder的组件就十分简单了，将需要操作的两个组件作为参数传过来，然后控制 Animation 对象来刷新界面就好了，对应的代码如下： class AnimatedBuilderDemo extends StatefulWidget { const AnimatedBuilderDemo({Key? key}) : super(key: key); @override _AnimatedBuilderDemoState createState() =>

_ AnimatedBuilderDemoState ();} class _ AnimatedBuilderDemoState extends State with SingleTickerProviderStateMixin {late Animation animation; late AnimationController controller; @ override void initState () {super.initState (); controller = AnimationController (duration: const Duration (seconds: 1), vsync: this); animation = Tween (begin: 0, end: 1.0) .animate (controller) } @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text),), body: RotationSwitchAnimatedBuilder (animation: animation, child1: Center (child: Container (padding: EdgeInsets.all (10), margin: EdgeInsets.all (10), constraints: BoxConstraints (minWidth: double.infinity) Decoration: BoxDecoration (borderRadius: BorderRadius.circular, gradient: LinearGradient (colors: [Colors.orange, Colors.green,],),) Child: Text ('Click the button to make a little sister', style: TextStyle (fontSize: 20, color: Colors.white, fontWeight: FontWeight.bold,), textAlign: TextAlign.center,) Child2: Center (child: Image.asset ('images/beauty.jpeg'), floatingActionButton: FloatingActionButton (child: Icon (Icons.play_arrow, color: Colors.white), onPressed:) {if (controller.status = = AnimationStatus.completed) {controller.reverse () } else {controller.forward ();},),); @ override void dispose () {controller.dispose (); super.dispose ();}}

Reuse is also easy, for example, if we pass a circle and a rectangle component, we can also reuse the animation effect.

This is the end of the introduction to "how Flutter uses AnimatedBuilder to achieve dynamic reuse". 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.