😺

[Flutter] CustomPaint

2022/12/02に公開

https://youtu.be/kp14Y4uHpHs
https://api.flutter.dev/flutter/widgets/CustomPaint-class.html

CustomPaint

高度にカスタマイズしたUIを作成できる(回っている⭐︎、マテリアルデザインのRipple effect を丸型にするなど)ウィジェット


CustomPaint(
 size: Size(200,100),
 painter: MyPainter(),
)

class MyPainter extends CustomPainter{
 
 void paint(Canvas canvas, Size size){
  canvas.drawLine(...);
 }
 
 bool shouldRepaint(CustomPainter old){
  return old.myParameter != myParameter;
 }
}

プロパティ

paint : canvasのあるところで自由に描画する。 描けるものは、
線: canvas.drawLine()
長方形: canvas.drawRect()
丸形: canvas.drawCircle()
アーチ型: canvas.drawArc()
path(平面の複雑な図形): canvas.drawPath()
ビットマップ画像: canvas.drawImage()
リサイズ可能なビットマップ画像: canvas.drawImageNine()
段落テキスト: canvas.drawParagraph()

また、色や影、ブレンドモードなど全て管理することができる

shouldRepaint : CustomPainter が再構成された時に呼び出され、前のペイント結果を再利用するようフレームワークに指示できる

Discussion