😺

[Flutter] CustomPaint

2022/12/02に公開

Flutter

tech

https://youtu.be/kp14Y4uHpHs

CustomPaint

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


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

class MyPainter extends CustomPainter{
 @override
 void paint(Canvas canvas, Size size){
  canvas.drawLine(...);
 }
 @override
 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 が再構成された時に呼び出され、前のペイント結果を再利用するようフレームワークに指示できる

CustomPaint

プロパティ

Discussion