[flutter] 플러터 Riverpod를 사용한 차트 그래프 처리 방법

30 Nov 2023

flutter

소개

플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 프레임워크로, UI 개발과 상태 관리를 손쉽게 할 수 있도록 도와줍니다. Riverpod는 플러터에서 상태 관리를 위한 라이브러리로, 차트 그래프 처리를 간편하게 할 수 있게 도와줍니다. 이번 포스트에서는 Riverpod를 사용하여 차트 그래프를 처리하는 방법에 대해 알아보겠습니다.

Riverpod 설치

Riverpod를 사용하기 위해서는 먼저 프로젝트에 Riverpod 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요.

dependencies:
  riverpod: ^1.0.0

의존성을 추가한 후, 패키지를 설치하기 위해 터미널에서 flutter pub get 명령을 실행해주세요.

차트 그래프 처리

차트 그래프를 처리하기 위해 먼저 flutter_chart 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요.

dependencies:
  flutter_chart: ^0.12.0

의존성을 추가한 후, 패키지를 설치하기 위해 터미널에서 flutter pub get 명령을 실행해주세요.

이제 차트 그래프를 처리하기 위한 코드를 만들어보겠습니다. 다음은 Bar 차트를 생성하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter_chart/flutter_chart.dart';

class BarChartWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Chart(
      chartType: ChartType.bar,
      xLabels: ['A', 'B', 'C', 'D'],
      datasets: [
        ChartDataset(
          label: 'Data',
          data: [10, 20, 30, 40],
          color: Colors.blue,
        ),
      ],
    );
  }
}

BarChartWidget 클래스에서는 Chart 위젯을 사용하여 Bar 차트를 생성합니다. chartType은 차트의 유형을 지정하는 속성이며, 여기서는 ‘bar’로 설정합니다. xLabels은 X축 레이블을 지정하는 속성이며, 데이터에 해당하는 레이블을 배열로 전달합니다. datasets는 차트 데이터를 지정하는 속성이며, 여기서는 막대 데이터 및 색상을 설정합니다.

Riverpod를 이용한 상태 관리

이제 Riverpod를 사용하여 상태 관리를 구현해보겠습니다. 먼저, 상태를 저장하기 위한 Provider를 정의해야 합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final barChartData = StateProvider<List<double>>((ref) {
  return [10, 20, 30, 40];
});

barChartData는 현재 Bar 차트에서 사용하는 데이터를 저장하는 Provider입니다.

이제 상태를 사용하여 Bar 차트를 생성하는 코드를 업데이트해보겠습니다.

import 'package:flutter/material.dart';
import 'package:flutter_chart/flutter_chart.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class BarChartWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final barChartDataValue = watch(barChartData);

    return Chart(
      chartType: ChartType.bar,
      xLabels: ['A', 'B', 'C', 'D'],
      datasets: [
        ChartDataset(
          label: 'Data',
          data: barChartDataValue.state,
          color: Colors.blue,
        ),
      ],
    );
  }
}

ConsumerWidget을 사용하여 BarChartWidget을 업데이트했습니다. barChartDataValue 변수를 사용하여 barChartData Provider의 상태를 가져옵니다.

이제 상태를 업데이트하는 방법을 살펴보겠습니다.

void updateChartData(BuildContext context) {
  final barChartData = context.read(barChartData);
  barChartData.state = [50, 60, 70, 80];
}

updateChartData 함수를 호출하면, barChartData 상태 값을 업데이트할 수 있습니다.

마치며

이번에는 Riverpod를 사용하여 플러터에서 차트 그래프를 처리하는 방법에 대해 알아보았습니다. Riverpod를 사용하면 상태 관리를 더욱 효과적으로 할 수 있으며, 플러터 앱에서 차트 그래프를 구현하는데 도움이 될 것입니다. 추가적인 자세한 정보는 Riverpod 공식 문서를 참고하시기 바랍니다.

참고: Riverpod 공식 문서

플러터 개발을 하시는 분들에게 많은 도움이 되었기를 바랍니다.