リバース・エンジニアリング

Flultterとテックブログと時々iOS

54. 【ナンバーズアプリ】Flutter で CustomPainter を使って円を描く

今日はペイント関連で好きな図形を描けるクラス CustomPainter について学習します。

api.flutter.dev

CustomPainterの使い方

CustomPainter クラスを扱う場合は基本これを継承したサブクラスの中で実装します。

ここでは、円を描くクラス CirclePainter を例に出して説明します。

circle_painter.dart

class CirclePainter extends CustomPainter {

}

このようにサブクラスを宣言します。

また、CirclePainter には2つのメソッドを実装する必要があります。

  1. paint メソッド
  2. shouldRepaint メソッド

1つ目の paint メソッドでは実際にキャンバスに描画します。
paint メソッドの引数には Canvas と Size オブジェクトがあります。

shouldRepaint メソッドでは再描画が必要かどうかを返します。
ここでは再描画する必要がない場合は false 、状態が変わる場合は true を返します。

実際に円を描く

それでは実際に CustomPainter を使って画面上で円を表示させてみます。
さきほど作成したサブクラスの中に宣言を追加します。

circle_painter.dart

import 'package:flutter/material.dart';
import 'dart:math';

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    /// 線は黒色を指定する
    Paint outerCircle = Paint()
      ..strokeWidth = 5
      ..color = Colors.black
      ..style = PaintingStyle.stroke;

    Offset center = Offset(size.width / 2, size.height / 2);
    double radius = min(size.width / 2, size.height / 2) - 7;

    canvas.drawCircle(center, radius, outerCircle);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

これでビルドすると画面上に線幅が5の黒色の円が描かれます。

f:id:qed805:20200511233400p:plain:w300
黒い円

四角を描く場合

四角を描く場合は

import 'package:flutter/material.dart';

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();

    paint.color = Colors.blue;
    var rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

このようにすると青色で四角を描けます。

f:id:qed805:20200511234005p:plain:w300
四角

これを使って次回はサークル状のプログレスバーを作ってみようと思います。

それでは、バイバイ。