Flutter開発: CustomPaintとPathでQRコードの枠線をデザインする

class QrScanPageContent extends StatelessWidget {
  const QrScanPageContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("QR Code Scanner"), // 画面タイトル
      ),
      body: CustomPaint(
        size: Size.infinite, // 画面全体のサイズに合わせて描画
        painter: _OverlayPainter(
          squareSize: 200.0, // 枠線エリアのサイズ
          borderRadius: 20.0, // 枠線の角の丸み
          borderThickness: 8.0, // 枠線の太さ
        ),
      ),
    );
  }
}

class _OverlayPainter extends CustomPainter {
  final double squareSize;
  final double borderRadius;
  final double borderThickness;

  _OverlayPainter({
    required this.squareSize,
    required this.borderRadius,
    required this.borderThickness,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final centerX = size.width / 2;
    final centerY = size.height / 2;

  // 背景を描画
    final backgroundPaint = Paint()..color = Colors.grey.withOpacity(0.5);
    canvas.drawRect(
        Rect.fromLTWH(0, 0, size.width, size.height), backgroundPaint);

  // 認識エリアを描画
    final rect = RRect.fromRectAndRadius(
      Rect.fromCenter(
        center: Offset(centerX, centerY),
        width: squareSize,
        height: squareSize,
      ),
      Radius.circular(borderRadius),
    );
    final innerPaint = Paint()..color = Colors.lightBlue.withOpacity(0.1);
    canvas.drawRRect(rect, innerPaint);

    //ここで枠のスタイルおよび枠を描きます。
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

final borderPaint = Paint()
  ..color = Colors.white.withOpacity(0.5) // 枠線の色と透明度を 設定
  ..style = PaintingStyle.stroke // 外枠スタイルを設定
  ..strokeWidth = borderThickness // 線の太さ
  ..strokeCap = StrokeCap.round; // 線の端を丸く設定

const double cornerLength = 55; // 各コーナーの長さ
double halfSquareSize = squareSize / 2; // 認識エリアの半分のサイズ
double left = centerX - halfSquareSize; // 左側の境界
double right = centerX + halfSquareSize; // 右側の境界
double top = centerY - halfSquareSize; // 上側の境界
double bottom = centerY + halfSquareSize; // 下側の境界

Path topLeftPath = Path(); // 新しい経路を定義
topLeftPath.moveTo(left + cornerLength, top);
topLeftPath.lineTo(left + borderRadius, top);

topLeftPath.arcToPoint(
  Offset(left, top + borderRadius), // 曲線の終点
  radius: Radius.circular(borderRadius), // 曲線の半径
  clockwise: false, // 反時計回りに曲線を描く
);

topLeftPath.lineTo(left, top + cornerLength);

canvas.drawPath(topLeftPath, borderPaint);

// 左下コーナー
final bottomLeftPath = Path()
  ..moveTo(left + cornerLength, bottom)
  ..lineTo(left + borderRadius, bottom)
  ..arcToPoint(
    Offset(left, bottom - borderRadius),
    radius: Radius.circular(borderRadius),
    clockwise: true,
  )
  ..lineTo(left, bottom - cornerLength);
canvas.drawPath(bottomLeftPath, borderPaint);

// 右下コーナー
final bottomRightPath = Path()
  ..moveTo(right - cornerLength, bottom)
  ..lineTo(right - borderRadius, bottom)
  ..arcToPoint(
    Offset(right, bottom - borderRadius),
    radius: Radius.circular(borderRadius),
    clockwise: false,
  )
  ..lineTo(right, bottom - cornerLength);
canvas.drawPath(bottomRightPath, borderPaint);

// 右上コーナー
final topRightPath = Path()
  ..moveTo(right - cornerLength, top)
  ..lineTo(right - borderRadius, top)
  ..arcToPoint(
    Offset(right, top + borderRadius),
    radius: Radius.circular(borderRadius),
    clockwise: true,
  )
  ..lineTo(right, top + cornerLength);
canvas.drawPath(topRightPath, borderPaint);