[flutter] 플러터(Flutter)와 데이터 시각화 라이브러리 연동

18 Dec 2023

flutter

플러터는 Google에서 제공하는 UI 툴킷으로, 데이터 시각화 애플리케이션을 개발할 때 많이 사용됩니다. 이제 데이터 시각화를 위한 라이브러리들을 통합해 플러터 앱과 연동하는 방법을 알아보겠습니다.

1. 플러터(Flutter) 앱에 데이터 시각화 라이브러리 추가

우선, pubspec.yaml 파일에 데이터 시각화 라이브러리를 추가합니다.

dependencies:
  charts_flutter: ^0.11.0 # 데이터 시각화 라이브러리

2. 데이터 시각화 구성

다음으로, 데이터 시각화를 위한 구성을 정의합니다. 예를 들어, 선 그래프를 그리기 위해서는 다음과 같은 코드를 사용할 수 있습니다.

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

List<charts.Series<TimeSeriesSales, DateTime>> _createData() {
  final data = [
    TimeSeriesSales(DateTime(2017, 9, 19), 5),
    TimeSeriesSales(DateTime(2017, 9, 26), 25),
    TimeSeriesSales(DateTime(2017, 10, 3), 100),
  ];

  return [
    charts.Series<TimeSeriesSales, DateTime>(
      id: 'Sales',
      colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
      domainFn: (TimeSeriesSales sales, _) => sales.time,
      measureFn: (TimeSeriesSales sales, _) => sales.sales,
      data: data,
    )
  ];
}

3. 데이터 시각화 위젯 추가

데이터 시각화를 표시하기 위한 위젯을 추가합니다.

charts.TimeSeriesChart(
  _createData(),
  animate: true,
  dateTimeFactory: const charts.LocalDateTimeFactory(),
)

4. 데이터 시각화 적용

위젯을 원하는 위치에 적용합니다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Flutter Data Visualization'),
    ),
    body: Center(
      child: charts.TimeSeriesChart(
        _createData(),
        animate: true,
        dateTimeFactory: const charts.LocalDateTimeFactory(),
      ),
    ),
  );
}

위와 같이 코드를 작성하면, 플러터 앱에 데이터 시각화 라이브러리를 통합할 수 있습니다.

이처럼, 데이터 시각화 라이브러리는 플러터 앱에서 다양한 형식의 그래프를 간편하게 구현할 수 있는데, 차트를 렌더링하기 위한 다양한 설정 옵션을 적용하여 더욱 다채로운 시각화를 구현할 수 있습니다.

참고: Flutter 공식 문서 - 데이터 시각화 라이브러리