2020.05.15 2020.08.05

54. Flutter で CustomPainter を使って円を描く

tamappe

CustomPainterの使い方
- 実際に円を描く
- 四角を描く場合

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

api.flutter.dev

CustomPainter class - rendering library - Dart API

https://api.flutter.dev/flutter/rendering/CustomPainter-class.html

API docs for the CustomPainter class from the rendering library, for the Dart programming language.

Table of Contents

CustomPainterの使い方

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

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

circle_painter.dart

class CirclePainter extends CustomPainter {

}

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

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

paint メソッド
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の黒色の円が描かれます。

黒い円

四角を描く場合

四角を描く場合は

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;
  }
}

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