플러터:그래프 그리기(fl chart)
- 플러터:개요
- 플러터:실행
- 플러터:개념 잡기
- 권한 사용
- 위젯
- 플러터:DB연결
- 플러터:Firebase(미완)
- 플러터:MySQL(미완)
- 디자인
- 플러터:배포
- 플러터:배포(안드로이드)(미완)
- 플러터:참고자료
- 플러터:위젯
- 플러터:구글 AdMob(미완)
- 플러터:라이브러리
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 그래프 라이브러리 비교
아래는 주요 그래프 라이브러리들의 유지보수 상태, 난이도, 특징, 공식 문서 링크를 정리한 표이다.
| | | | | | | | | | | | - | ----- | - | ------ | - | ------------------ | - | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | ----- | | | 활발 | | 쉬움 | | 가장 널리 사용, 애니메이션 우수 | | [[1](https://pub.dev/packages/fl_chart) pub.dev] / [[2](https://github.com/imaNNeoFighT/fl_chart) GitHub] | | ⭐⭐⭐⭐⭐ | | | | | | | | | | | | | | 거의 멈춤 | | 중간 | | Material 기반, 구조 복잡 | | [[3](https://pub.dev/packages/charts_flutter) pub.dev] / [[4](https://github.com/google/charts) GitHub] | | ⭐⭐ | | | | | | | | | | | | | | 매우 활발 | | 중간~어려움 | | 기업용 기능 최강, 50+ 차트 | | [[5](https://help.syncfusion.com/flutter/charts/overview) Docs] / [[6](https://pub.dev/packages/syncfusion_flutter_charts) pub.dev] | | ⭐⭐⭐⭐ | | | | | | | | | | | | | | 활발 | | 어려움 | | D3.js 스타일 선언형 그래프 | | [[7](https://pub.dev/packages/graphic) pub.dev] / [[8](https://github.com/entronad/graphic) GitHub] | | ⭐⭐⭐ | | | | | | | | | | | | | | 정체 | | 쉬움 | | 간단한 곡선 그래프 | | [[9](https://pub.dev/packages/bezier_chart) pub.dev] / [[10](https://github.com/aeyrium/bezier-chart) GitHub] | | ⭐ | | | | | | | | | | | | | | 불규칙 | | 쉬움 | | 미니 차트용 | | [[11](https://pub.dev/packages/charts_sparkline) charts_sparkline] | | ⭐⭐ | | | | | | | | | | | |
8. 다음 학습 추천
|