[Flutter] 막대그래프 만들기

kimdocs...📄·2023년 11월 27일
0

flutter

목록 보기
17/30
import 'package:flutter/cupertino.dart';

import '../foundation/color.dart';

class BarChartPainter extends CustomPainter {
  final List<double> data;
  final double barWidth = 12.0; // 막대의 너비
  final double spacing = 16.0; // 막대 사이 간격
  final double cornerRadius = 8.0; // 모서리 둥글기 반지름

  BarChartPainter(this.data);

  
  void paint(Canvas canvas, Size size) {
    final defaultPaint = Paint()
      ..color = CGColor.secondary_3rd
      ..style = PaintingStyle.fill;

    final bluePaint = Paint()
      ..color = CGColor.primary_1st
      ..style = PaintingStyle.fill;

    for (int i = 0; i < data.length; i++) {
      final x = (i * (barWidth + spacing)).toDouble();
      final y = size.height * (1-data[i]);

      final defaultRect = RRect.fromRectAndRadius(
        Rect.fromPoints(Offset(x, 0), Offset(x + barWidth, size.height)),
        Radius.circular(cornerRadius),
      );

      final rect = RRect.fromRectAndRadius(
        Rect.fromPoints(Offset(x, size.height), Offset(x + barWidth, y)),
        Radius.circular(cornerRadius),
      );

      canvas.drawRRect(defaultRect, defaultPaint);
      canvas.drawRRect(rect, bluePaint);
    }
  }

  
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

사용하는 방법

Container(
            padding: const EdgeInsets.all(Spacing.s12),
            height: 128,
            child: CustomPaint(
              size: const Size(double.infinity, double.infinity), // 그래프 영역 크기 설정
              painter: BarChartPainter([0.5, 0.5, 0.7, 1, 0, 0, 0]),
            ),
          )
profile
👩‍🌾 GitHub: ezidayzi / 📂 Contact: ezidayzi@gmail.com

0개의 댓글