Flutter series: Transformers in flutter

brief introduction

Although we are developing APP The process of is based on function , But sometimes for beauty or other special needs , Some transformation of components is required . stay Flutter This transformation is called Transform.

flutter The power of , It's OK for all widget Conduct Transform, So it can make a very cool effect .

Transform brief introduction

stay Flutter in ,Transform It's also a Widget, It mainly applies transformation to its sub - widget On . So let's see Transform Definition and constructor of ：

class Transform extends SingleChildRenderObjectWidget

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


You can see Transform need transform,origin,alignment,transformHitTests and filterQuality These properties .

among transform It's a Matrix4 object , It's a 4 A matrix of dimensions , Used to describe the child How to be transform.

origin It's a Offset object , Represents the value of the original coordinate system , The default is the upper left corner .origin and transform Is related , We can modify origin To achieve a different transform The effect of .

alignment yes origin The right way to do it , It's a AlignmentGeometry object .

filterQuality Is in the process of image transformation , Sampling quality of image .

In addition to the default constructor above , For the sake of simplicity Transform Several constructors with special functions are also provided ：

 Transform.rotate({
 Key? key,
 required double angle,
 this.origin,
 this.alignment = Alignment.center,
 this.transformHitTests = true,
 this.filterQuality,
 Widget? child,
 }) : transform = Matrix4.rotationZ(angle),
 super(key: key, child: child);


Transform.rotate It's a pair child Do the rotation transformation .

By passing in angle attribute , Implementer child Along the Z Shaft rotation .

 Transform.translate({
 Key? key,
 required Offset offset,
 this.transformHitTests = true,
 this.filterQuality,
 Widget? child,
 }) : transform = Matrix4.translationValues(offset.dx, offset.dy, 0.0),
 origin = null,
 alignment = null,
 super(key: key, child: child);


Transform.translate By changing offset To change the position of the original coordinate system .

 Transform.scale({
 Key? key,
 required double scale,
 this.origin,
 this.alignment = Alignment.center,
 this.transformHitTests = true,
 this.filterQuality,
 Widget? child,
 }) : transform = Matrix4.diagonal3Values(scale, scale, 1.0),
 super(key: key, child: child);


Transform.scale By passing in scale, Come to the right place child Zoom in and out .

As you can see from the different constructors above , In fact, the parameters passed in will eventually be converted into Matrix4 Of transform object .

If you are right about Matrix4 Familiar words , Then you can use the most direct constructor , Direct in Matrix4.

Transform Use

We introduced it above Transform.rotate,Transform.translate and Transform.scale These constructors , Next, we will use specific examples to explain in detail .

First of all Transform.rotate, Used to rotate the subassembly , Here is an example of using ：

 Widget build(BuildContext context) {
 return Center(
 child: Transform.rotate(
 angle: pi/4,
 child: const Icon(
 Icons.airplanemode_active,
 size: 200,
 color: Colors.blue,
 ),
 ));
 }


The above example will be a plane Icon rotate pi/4, That is to say 45 degree , The final generated interface is as follows ：

Next is Transform.translate, This method is mainly used for coordinate axis transformation of sub components , Need to pass in a offset Options , As shown below ：

 return Transform.translate(
 offset:const Offset(50.0, 100.0),
 child: const Icon(
 Icons.airplanemode_active,
 size: 200,
 color: Colors.blue,
 ),
 );


We still use the aircraft icon above , But he did a coordinate transformation , The final interface is as follows ：

The last thing we want to show is Transform.scale, Used to scale sub components .

Above our icon size yes 200, We can scale it to 50%, As shown below ：

 return Transform.scale(
 scale: 0.5,
 child: const Icon(
 Icons.airplanemode_active,
 size: 200,
 color: Colors.blue,
 ),
 );


We can get the following interface by running ：

Is it getting smaller ？

summary

Transform It's a powerful widget, adopt Transform We can make many very interesting effects .

Examples of this article ：

https://github.com/ddean2009/learn-flutter.git