【Flutter】図形(CustomPaint)の作成方法からカスタマイズ方法までの完全ガイド！

// 円を描画する
canvas.drawCircle(
  Offset(100.0, 100.0), // 円の中心を指定する
  50.0, // 円の半径を指定する
  Paint()..color = Colors.blue, // 描画する円の色を青に設定する
);

// 三角形を描画する
Path path = Path(); // Pathオブジェクトを生成する
path.moveTo(100.0, 100.0); // 描画開始点を設定する
path.lineTo(150.0, 200.0); // 一つ目の頂点への線を描画する
path.lineTo(50.0, 200.0); // 二つ目の頂点への線を描画する
path.close(); // パスを閉じることで、最初の点に戻る
canvas.drawPath(path, Paint()..color = Colors.green); // 三角形の色を緑に設定して描画する

// 四角形を描画する
canvas.drawRect(
  Rect.fromLTWH(50.0, 100.0, 100.0, 150.0), // 四角形の位置とサイズを指定する
  Paint()..color = Colors.red, // 描画する四角形の色を赤に設定する
);

// 直線を描画する
canvas.drawLine(
  Offset(100.0, 100.0), // 開始点を指定する
  Offset(200.0, 200.0), // 終了点を指定する
  Paint()..color = Colors.black, // 描画する線の色を黒に設定する
);

// 波線を描画する
Path path = Path(); // Pathオブジェクトを生成する
path.moveTo(0, 100); // 描画開始点を設定する
for (int i = 0; i < 10; i++) {
  path.quadraticBezierTo(
    i * 50 + 25, i % 2 == 0 ? 150 : 50, // 波の頂点を計算する
    i * 50 + 50, 100, // 波の谷を計算する
  );
}
canvas.drawPath(path, Paint()..color = Colors.blue); // 波線を青色で描画する