Flutter Custom RenderObject 완벽 가이드 2026: 커스텀 페인팅과 면접 대비

// RenderObject의 기본 생명주기
class CustomRenderBox extends RenderBox {
  @override
  void performLayout() {
    // 레이아웃 제약을 받아 크기 결정
    size = constraints.constrain(Size(200, 100));
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // 캔버스에 그리기
    final canvas = context.canvas;
    final paint = Paint()..color = Colors.blue;
    canvas.drawRect(offset & size, paint);
  }
}

class ResponsiveRenderBox extends RenderBox {
  @override
  void performLayout() {
    // 제약을 자식에게 전파
    if (child != null) {
      child!.layout(constraints, parentUsesSize: true);
      size = child!.size;
    } else {
      size = constraints.smallest;
    }
  }

  @override
  bool hitTestSelf(Offset position) => true;

  @override
  void handleEvent(PointerEvent event, BoxHitTestEntry entry) {
    // 이벤트 처리
  }
}

class WaveformPainter extends CustomPainter {
  final List<double> samples;
  final Color waveColor;
  final double strokeWidth;

  WaveformPainter({
    required this.samples,
    this.waveColor = Colors.blue,
    this.strokeWidth = 2.0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    if (samples.isEmpty) return;

    final paint = Paint()
      ..color = waveColor
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    final path = Path();
    final dx = size.width / (samples.length - 1);
    final midY = size.height / 2;

    path.moveTo(0, midY + samples[0] * midY);

    for (var i = 1; i < samples.length; i++) {
      path.lineTo(i * dx, midY + samples[i] * midY);
    }

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(WaveformPainter oldDelegate) {
    return oldDelegate.samples != samples ||
           oldDelegate.waveColor != waveColor;
  }
}

class CircularProgress extends LeafRenderObjectWidget {
  final double progress;
  final Color backgroundColor;
  final Color progressColor;
  final double strokeWidth;

  const CircularProgress({
    super.key,
    required this.progress,
    this.backgroundColor = Colors.grey,
    this.progressColor = Colors.blue,
    this.strokeWidth = 8.0,
  });

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderCircularProgress(
      progress: progress,
      backgroundColor: backgroundColor,
      progressColor: progressColor,
      strokeWidth: strokeWidth,
    );
  }

  @override
  void updateRenderObject(
    BuildContext context,
    RenderCircularProgress renderObject,
  ) {
    renderObject
      ..progress = progress
      ..backgroundColor = backgroundColor
      ..progressColor = progressColor
      ..strokeWidth = strokeWidth;
  }
}

class RenderCircularProgress extends RenderBox {
  double _progress;
  Color _backgroundColor;
  Color _progressColor;
  double _strokeWidth;

  RenderCircularProgress({
    required double progress,
    required Color backgroundColor,
    required Color progressColor,
    required double strokeWidth,
  })  : _progress = progress,
        _backgroundColor = backgroundColor,
        _progressColor = progressColor,
        _strokeWidth = strokeWidth;

  set progress(double value) {
    if (_progress == value) return;
    _progress = value;
    markNeedsPaint();
  }

  set backgroundColor(Color value) {
    if (_backgroundColor == value) return;
    _backgroundColor = value;
    markNeedsPaint();
  }

  set progressColor(Color value) {
    if (_progressColor == value) return;
    _progressColor = value;
    markNeedsPaint();
  }

  set strokeWidth(double value) {
    if (_strokeWidth == value) return;
    _strokeWidth = value;
    markNeedsLayout();
  }

  @override
  void performLayout() {
    final minDimension = constraints.biggest.shortestSide;
    size = Size.square(minDimension);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;
    final rect = offset & size;
    final center = rect.center;
    final radius = (size.shortestSide - _strokeWidth) / 2;

    // 배경 원
    final bgPaint = Paint()
      ..color = _backgroundColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = _strokeWidth;

    canvas.drawCircle(center, radius, bgPaint);

    // 진행 호
    final progressPaint = Paint()
      ..color = _progressColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = _strokeWidth
      ..strokeCap = StrokeCap.round;

    final sweepAngle = 2 * pi * _progress;
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -pi / 2,
      sweepAngle,
      false,
      progressPaint,
    );
  }
}

class OptimizedRenderBox extends RenderBox {
  @override
  bool get sizedByParent => true;

  @override
  Size computeDryLayout(BoxConstraints constraints) {
    return constraints.biggest;
  }

  @override
  void performResize() {
    size = constraints.biggest;
  }

  @override
  void performLayout() {
    // sizedByParent가 true인 경우, 여기서는 크기를 설정하지 않음
    // 자식의 레이아웃만 수행
  }
}

class AnimatedChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: CustomPaint(
        painter: ChartPainter(),
        willChange: true,
      ),
    );
  }
}

class InteractiveRenderBox extends RenderBox {
  @override
  bool hitTest(BoxHitTestResult result, {required Offset position}) {
    if (size.contains(position)) {
      result.add(BoxHitTestEntry(this, position));
      return true;
    }
    return false;
  }

  @override
  void handleEvent(PointerEvent event, BoxHitTestEntry entry) {
    if (event is PointerDownEvent) {
      // 터치 다운 이벤트 처리
    } else if (event is PointerUpEvent) {
      // 터치 업 이벤트 처리
    }
  }
}