LiteChart Flutter

설정은 최소화, 성능은 극대화 — 외부 의존성 없는 경량 Flutter 차트 라이브러리

pub.dev License: MIT Flutter


✨ 특징

항목설명
🚀 성능CustomPainter + Canvas 직접 렌더링으로 수천 개 포인트도 프레임 드롭 없음
🎯 간결함단 두 줄 코드로 즉시 차트 생성
📦 경량Flutter SDK 외 외부 의존성 없음
🎨 유연성ChartStyle 단일 객체로 모든 스타일 커스터마이징
📱 반응형LayoutBuilder 기반으로 모든 화면 크기 대응

📊 지원 차트

  • 라인 차트 (LiteLineChart) — 베지에 곡선, 그라디언트 영역, 드래그 툴팁
  • 바 차트 (LiteBarChart) — 단일/그룹 바, 선택 팽창 효과
  • 파이/도넛 차트 (LitePieChart) — 터치 섹션 확장, 도넛 중앙 위젯 지원

🚀 빠른 시작

1. 패키지 추가

# pubspec.yaml
dependencies:
  lite_chart_flutter: ^0.1.0

2. import

import 'package:lite_chart_flutter/lite_chart_flutter.dart';

3. 라인 차트 — 최소 코드

LiteLineChart(
  data: [
    ChartData(x: 0, y: 10, label: '1월'),
    ChartData(x: 1, y: 25, label: '2월'),
    ChartData(x: 2, y: 18, label: '3월'),
    ChartData(x: 3, y: 32, label: '4월'),
  ],
)

4. 바 차트 (그룹 바)

LiteBarChart(
  series: [
    BarSeries(name: '2023', data: [
      ChartData(x: 0, y: 85, label: '1Q'),
      ChartData(x: 1, y: 92, label: '2Q'),
    ]),
    BarSeries(name: '2024', data: [
      ChartData(x: 0, y: 98, label: '1Q'),
      ChartData(x: 1, y: 115, label: '2Q'),
    ]),
  ],
)

5. 도넛 차트

LitePieChart(
  sections: [
    PieSection(value: 40, label: '식비',   color: Color(0xFF6C63FF)),
    PieSection(value: 25, label: '교통비', color: Color(0xFF43E97B)),
    PieSection(value: 35, label: '여가비', color: Color(0xFFFF6B6B)),
  ],
  // donutHoleRatio > 0 이면 도넛 차트
  style: ChartStyle(donutHoleRatio: 0.55),
  centerWidget: Text('지출', style: TextStyle(color: Colors.white)),
)

🎨 스타일 커스터마이징

ChartStylecopyWith로 필요한 속성만 변경:

LiteLineChart(
  data: data,
  style: const ChartStyle(
    palette: [Color(0xFF6C63FF)],   // 라인 색상
    lineThickness: 3.0,             // 선 두께
    smooth: true,                   // 베지에 곡선
    fillArea: true,                 // 영역 채우기
    fillOpacity: 0.2,               // 채우기 투명도
    pointRadius: 5.0,               // 데이터 포인트 크기
    gridStyle: GridStyle(
      showHorizontal: true,
      dashPattern: [4, 4],          // 대시 격자선
    ),
    axisStyle: AxisStyle(
      yLabelCount: 5,               // Y축 라벨 수
      yLabelFormatter: (v) => '${v.toInt()}K',
    ),
    tooltipStyle: TooltipStyle(
      backgroundColor: Color(0xFF1A1A2E),
    ),
    animationDuration: Duration(milliseconds: 1200),
  ),
  tooltipFormatter: (p) => '${p.label}: ${p.y.toInt()}',
)

📁 파일 구조

lib/
├── lite_chart_flutter.dart          # 패키지 진입점 (export 전용)
└── src/
    ├── models/
    │   └── chart_data.dart          # ChartData, BarSeries, PieSection
    ├── styles/
    │   └── chart_style.dart         # ChartStyle, GridStyle, TooltipStyle, AxisStyle
    ├── utils/
    │   └── chart_utils.dart         # 좌표 변환, 베지에, 대시선, 텍스트 헬퍼
    └── charts/
        ├── line_chart.dart          # LiteLineChart
        ├── bar_chart.dart           # LiteBarChart
        └── pie_chart.dart           # LitePieChart

example/
└── lib/
    └── main.dart                    # 3종 차트 데모 앱

📝 라이선스

MIT License — 자유롭게 사용, 수정, 배포 가능합니다.