🐙

[Flutter] Transform

2022/12/28に公開

https://youtu.be/9z_YNlRlWfA
https://api.flutter.dev/flutter/widgets/Transform-class.html

Transform

このWidgetをつかうと、Flutterが自らレンダリングしてくれる
例)45°回転するメニューアイコン、オシャレなアニメーションのトランジション、バウンスするカルーセル、かっこいいメニュー などができるようになる

45°回転するメニューアイコン:

Transform.rotate(
 angle: pi/4, // 45 deg
 child: MyIcon(),
);

大きさを変える:

Transform.scale(
 scale: 1.5,
 child: MyIcon(),
);

位置を変える:

Transform.translate(
 offset: Offset(50,50),
 child: MyIcon(),
);

傾きを変える:

Transform(
transform: Matrix4.skewX(0.3),
 child: MyIcon(),
);

3Dで見た目を変える:

Transform(
 transform: Matrix4.identify()
  ..setEntry(3,2,0.01)
  ..rotateX(0.6),
 alignment: FractionalOffset.center, 
 child: MyIcon(),
);

Discussion