플러터:그래프 그리기(fl chart) 편집하기

{{플러터}}

== 1. 개요 ==
Flutter에서 실시간 그래프를 그리기 위해 **슬라이더(Slider)** 위젯으로 값을 조정하고, 이를 **그래프 라이브러리(예: fl_chart)**와 연결하는 기본 구조를 정리한 문서이다.

본 문서에서는 다음을 다룬다:

* Flutter 슬라이더 기본 속성
* 슬라이더와 상태관리 기본 구조
* fl_chart 기반 실시간 그래프 예시 구조
* 상태변화와 그래프 리빌드 흐름

== 2. Slider 위젯 기본 ==
Flutter의 `Slider`는 숫자 값을 연속 또는 단계적으로 조정할 수 있는 입력 위젯이다.

=== 2.1. 기본 속성 목록 ===
; **value**
: 현재 슬라이더의 값. (double)

; **min / max**
: 슬라이더의 최소/최대 범위를 지정

; **onChanged(double value)**
: 슬라이더가 움직일 때 호출되는 콜백. 상태 갱신 시 사용

; **divisions**
: 값을 단계로 제한. 예) divisions: 10 → 0~100 범위에서 10단계로 쪼개짐

; **label**
: `divisions`와 함께 사용 시, 현재 값을 툴팁 형태로 표시 가능

; **activeColor / inactiveColor**
: 활성/비활성 트랙 색상

; **semanticFormatterCallback**
: 접근성을 위한 텍스트 변환

=== 2.2. Slider 코드 예시 ===

```
Slider(
  value: sliderValue,
  min: 0,
  max: 100,
  divisions: 20,
  label: sliderValue.toStringAsFixed(0),
  onChanged: (v) {
    setState(() {
      sliderValue = v;
    });
  },
)
```

== 3. 그래프 라이브러리 선택 ==
Flutter에서 자주 사용되는 그래프 라이브러리:

* **fl_chart** → 가장 널리 사용됨. 커스터마이징 다양. 실시간 그래프 가능.
* charts_flutter → 구글 제공. 구조는 안정적이나 커스텀 난이도가 약간 있음.
* graphic → 선언적 방식. Rx-like UI.

== 4. fl_chart를 이용한 실시간 그래프 구조 ==
슬라이더 값이 변경될 때마다 그래프에 표시되는 데이터 리스트를 업데이트하는 방식이 일반적이다.

흐름:

1. 슬라이더 변경 → onChanged 호출
2. 데이터 리스트에 새로운 값 push
3. 상태 업데이트
4. fl_chart가 리빌드되면서 새로운 그래프 출력

=== 4.1. 데이터 구조 예시 ===

```
List<FlSpot> dataPoints = [
  FlSpot(0, 0),
];
```

슬라이더 값 변경 시:

```
setState(() {
  time++;
  dataPoints.add(FlSpot(time.toDouble(), sliderValue));
});
```

=== 4.2. 그래프 위젯 기본 구조 ===

```
LineChart(
  LineChartData(
    lineBarsData: [
      LineChartBarData(
        spots: dataPoints,
        isCurved: true,
        barWidth: 3,
      )
    ],
  ),
)
```

== 5. 전체 구성 예시 (pseudo code) ==

```
double sliderValue = 50;
int time = 0;
List<FlSpot> dataPoints = [FlSpot(0, 50)];

Column(
  children: [
    Slider(
      value: sliderValue,
      min: 0,
      max: 100,
      divisions: 20,
      label: sliderValue.toStringAsFixed(0),
      onChanged: (v) {
        setState(() {
          sliderValue = v;
          time++;
          dataPoints.add(FlSpot(time.toDouble(), v));
        });
      },
    ),

    Expanded(
      child: LineChart(
        LineChartData(
          lineBarsData: [
            LineChartBarData(spots: dataPoints)
          ],
        ),
      ),
    )
  ],
)
```

== 6. 실시간 그래프 구현 시 팁 ==

* 데이터가 너무 많아지면 성능이 떨어질 수 있으므로 일정 개수 이상 시 앞부분 제거
* setState 외에 Provider, Riverpod, Bloc 등을 사용하면 구조가 더 깔끔해짐
* UI 안정성을 위해 그래프 업데이트 주기를 제한할 수도 있음 (예: 100ms마다 적용)

== 7. Flutter 그래프 라이브러리 비교 ==
아래는 주요 그래프 라이브러리들의 유지보수 상태, 난이도, 특징, 공식 문서 링크를 정리한 표이다.

{| class="wikitable"

| ! 라이브러리 !! 유지보수 !! 난이도 !! 특징 !! 공식 문서 링크 !! 실시간 적합도 |   |       |   |        |   |                    |   |                                                                                                                                                                                                                                        |   |       |
| --------------------------------------------------- | - | ----- | - | ------ | - | ------------------ | - | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | ----- |
| '''fl_chart'''                                      |   | 활발    |   | 쉬움     |   | 가장 널리 사용, 애니메이션 우수 |   | [[https://pub.dev/packages/fl_chart](https://pub.dev/packages/fl_chart) pub.dev] / [[https://github.com/imaNNeoFighT/fl_chart](https://github.com/imaNNeoFighT/fl_chart) GitHub]                                                       |   | ⭐⭐⭐⭐⭐ |
| -                                                   |   |       |   |        |   |                    |   |                                                                                                                                                                                                                                        |   |       |
| '''charts_flutter''' (Google)                       |   | 거의 멈춤 |   | 중간     |   | Material 기반, 구조 복잡 |   | [[https://pub.dev/packages/charts_flutter](https://pub.dev/packages/charts_flutter) pub.dev] / [[https://github.com/google/charts](https://github.com/google/charts) GitHub]                                                           |   | ⭐⭐    |
| -                                                   |   |       |   |        |   |                    |   |                                                                                                                                                                                                                                        |   |       |
| '''syncfusion_flutter_charts'''                     |   | 매우 활발 |   | 중간~어려움 |   | 기업용 기능 최강, 50+ 차트  |   | [[https://help.syncfusion.com/flutter/charts/overview](https://help.syncfusion.com/flutter/charts/overview) Docs] / [[https://pub.dev/packages/syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) pub.dev] |   | ⭐⭐⭐⭐  |
| -                                                   |   |       |   |        |   |                    |   |                                                                                                                                                                                                                                        |   |       |
| '''graphic'''                                       |   | 활발    |   | 어려움    |   | D3.js 스타일 선언형 그래프  |   | [[https://pub.dev/packages/graphic](https://pub.dev/packages/graphic) pub.dev] / [[https://github.com/entronad/graphic](https://github.com/entronad/graphic) GitHub]                                                                   |   | ⭐⭐⭐   |
| -                                                   |   |       |   |        |   |                    |   |                                                                                                                                                                                                                                        |   |       |
| '''bezier_chart'''                                  |   | 정체    |   | 쉬움     |   | 간단한 곡선 그래프         |   | [[https://pub.dev/packages/bezier_chart](https://pub.dev/packages/bezier_chart) pub.dev] / [[https://github.com/aeyrium/bezier-chart](https://github.com/aeyrium/bezier-chart) GitHub]                                                 |   | ⭐     |
| -                                                   |   |       |   |        |   |                    |   |                                                                                                                                                                                                                                        |   |       |
| 기타(sparkline 등)                                     |   | 불규칙   |   | 쉬움     |   | 미니 차트용             |   | [[https://pub.dev/packages/charts_sparkline](https://pub.dev/packages/charts_sparkline) charts_sparkline]                                                                                                                              |   | ⭐⭐    |
| }                                                   |   |       |   |        |   |                    |   |                                                                                                                                                                                                                                        |   |       |

== 8. 다음 학습 추천 ==

* Stream + StreamBuilder로 그래프 자동 갱신 구조 만들기
* 애니메이션 기능 사용한 그래프 부드럽게 업데이트
* 여러 슬라이더를 사용한 다중 데이터 그래프 구현