CustomPainter 클래스를 확장하는 클래스의 paint 메서드 만들기

 

 @override
  void paint(Canvas canvas, Size size) {
    if(dataRowFixUse) {
      double yPosition = 50;

      final Paint paint = Paint()
        ..color = CupertinoColors.systemGrey
        ..strokeWidth = 1;

      for (int i = 0; i < dataRowFixCount; i++) {
        // 선 그리기
        canvas.drawLine(
            Offset(0, yPosition), Offset(size.width, yPosition), paint);

        // 텍스트 그리기
        drawText(canvas, "${i + 1}" + sideTitle, textStyle, size.width / 2,
            yPosition);

        // 다음 행 위치로 업데이트
        //yPosition += rowHeight +textStyle.fontSize!;
        yPosition += bodyRowHeight;
      }
      // 선 그리기
      canvas.drawLine(
          Offset(0, yPosition), Offset(size.width, yPosition), paint);
    } else{
      final linePaint = Paint()
        ..color = CupertinoColors.systemGrey
        ..strokeWidth = 1.0;

      double yPosition = 0.0; // 첫 번째 행의 시작 위치
      canvas.drawLine(Offset(0, yPosition + headerRowHeight), Offset(size.width, yPosition + headerRowHeight), linePaint);
    }
  }

주어진 코드는 Flutter에서 CustomPainter 클래스를 확장하는 클래스의 paint 메서드를 구현한 것입니다. 이 메서드는 Canvas 객체와 Size 객체를 사용하여 화면에 그래픽을 그리는 역할을 합니다. 아래에서 코드의 주요 부분을 해석해드리겠습니다.

코드 해석

1. 조건문 if(dataRowFixUse):
   • dataRowFixUse가 true일 경우 특정한 방식으로 그리기 작업을 수행합니다.
   • false일 경우 다른 방식으로 그리기 작업을 수행합니다.
2. 변수 및 페인트 객체 초기화:
   • double yPosition = 50; : 초기 y 위치를 50으로 설정합니다.
   • Paint paint = Paint()..color = CupertinoColors.systemGrey..strokeWidth = 1; : 회색 선을 그리기 위한 페인트 객체를 초기화합니다.
3. 반복문을 통한 행 그리기:
   • for (int i = 0; i < dataRowFixCount; i++) : dataRowFixCount 만큼 반복합니다.
   • canvas.drawLine(Offset(0, yPosition), Offset(size.width, yPosition), paint); : 현재 y 위치에서 화면의 너비만큼 수평선을 그립니다.
   • drawText(canvas, "${i + 1}" + sideTitle, textStyle, size.width / 2, yPosition); : y 위치에 텍스트를 그립니다. 텍스트는 행 번호와 sideTitle을 포함합니다.
   • yPosition += bodyRowHeight; : y 위치를 다음 행으로 업데이트합니다.
4. 마지막 선 그리기:
   • canvas.drawLine(Offset(0, yPosition), Offset(size.width, yPosition), paint); : 마지막 y 위치에서 수평선을 그립니다.
5. else 블록:
   • final linePaint = Paint()..color = CupertinoColors.systemGrey..strokeWidth = 1.0; : 회색 선을 그리기 위한 새로운 페인트 객체를 초기화합니다.
   • double yPosition = 0.0; : y 위치를 0으로 초기화합니다.
   • canvas.drawLine(Offset(0, yPosition + headerRowHeight), Offset(size.width, yPosition + headerRowHeight), linePaint); : 헤더 행의 높이만큼 y 위치를 더한 곳에 수평선을 그립니다.

결론

이 코드는 dataRowFixUse라는 플래그를 기반으로 두 가지 다른 방식으로 캔버스에 선과 텍스트를 그리는 작업을 수행합니다. 첫 번째 방식은 여러 행을 그리며 각 행에 텍스트를 추가하고, 두 번째 방식은 단일 선을 그리며 헤더 행의 높이를 고려합니다.