[flutter] 플러터(Flutter)에서 데이터 시각화 기능 구현하기

참고 자료: Flutter 공식 문서, Charts 라이브러리 공식 문서

데이터 시각화는 모바일 애플리케이션의 사용자 인터페이스에 중요한 역할을 합니다. Flutter를 사용하여 플랫폼 간 모바일 앱을 개발 중이라면, 데이터 시각화를 구현하는 방법을 알고 있어야 합니다.

이 글에서는 플러터(Flutter)에서 데이터 시각화 기능을 구현하는 방법을 알아보겠습니다.

1. Charts 라이브러리 설치하기

Flutter에서 데이터 시각화에 주로 사용되는 라이브러리 중 하나는 charts_flutter입니다. 이 라이브러리는 다양한 차트 유형을 제공하여 데이터를 시각적으로 표현할 수 있습니다.

pubspec.yaml 파일에 아래와 같은 의존성을 추가하여 Charts 라이브러리를 설치합니다:

dependencies:
  charts_flutter: ^0.10.0

그리고 다음 명령어로 의존성을 가져오세요:

$ flutter pub get

2. 차트 위젯 추가하기

데이터 시각화를 위한 차트 위젯을 추가해보겠습니다. 예를 들어, 막대 그래프를 만들어보겠습니다.

먼저, 데이터를 정의합니다. 다음은 막대 그래프에 사용할 예제 데이터입니다:

final List<ChartData> data = [
  ChartData('A', 5),
  ChartData('B', 10),
  ChartData('C', 7),
  ChartData('D', 3),
];

ChartData는 x축과 y축 데이터를 포함하는 데이터 모델입니다.

다음으로, 차트 위젯을 생성합니다. BarChart 위젯을 사용하여 막대 그래프를 만들어보겠습니다:

import 'package:charts_flutter/flutter.dart' as charts;

class BarChartWidget extends StatelessWidget {
  final List<ChartData> data;

  BarChartWidget(this.data);

  @override
  Widget build(BuildContext context) {
    List<charts.Series<ChartData, String>> series = [
      charts.Series(
        id: 'Data',
        data: data,
        domainFn: (ChartData item, _) => item.label,
        measureFn: (ChartData item, _) => item.value,
      )
    ];

    return charts.BarChart(
      series,
      animate: true,
    );
  }
}

위의 코드에서 BarChartWidget 클래스는 data 리스트를 받아 막대 그래프를 생성하는 위젯입니다. charts_flutter 패키지의 BarChart 위젯을 사용하여 실제 차트를 생성하고 series 리스트를 전달합니다.

3. 차트 위젯 사용하기

마지막으로, 앱의 UI에 차트 위젯을 추가하고 데이터를 전달하여 시각적으로 표현합니다. 예제에서는 Scaffold 위젯을 사용하여 UI를 구성하고, 차트 위젯을 body 속성에 추가합니다:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chart Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Chart Example'),
        ),
        body: Center(
          child: BarChartWidget(data),
        ),
      ),
    );
  }
}

위의 코드에서 BarChartWidget(data)를 이용해 위에서 정의한 차트 위젯을 사용합니다.

결론

플러터(Flutter)에서 데이터 시각화를 구현하는 방법에 대해 알아보았습니다. Charts 라이브러리를 사용하여 다양한 종류의 차트를 만들 수 있으며, 데이터를 시각적으로 표현하여 모바일 앱의 사용자 인터페이스를 향상시킬 수 있습니다. 추가적으로, Flutter 공식 문서와 Charts 라이브러리의 공식 문서는 참고 자료로 유용한 정보를 제공하고 있습니다.

Happy coding!