Flutter의 그래프와 차트(Graphs and Charts) 사용법

데이터 시각화는 복잡한 정보를 직관적으로 전달할 수 있는 중요한 방법입니다. Flutter 애플리케이션에서 데이터를 효과적으로 표현하기 위해 다양한 그래프와 차트를 사용할 수 있습니다. Flutter는 기본적으로 차트를 제공하지 않지만, 외부 패키지와 위젯을 활용하여 손쉽게 차트와 그래프를 생성할 수 있습니다. 이번 글에서는 Flutter에서 차트와 그래프를 사용하는 방법을 단계별로 설명하고, 대표적인 차트 라이브러리인 fl_chart를 활용하는 예제를 다루겠습니다.

1. Flutter에서 그래프와 차트를 사용하는 방법

Flutter는 기본적으로 차트 관련 기능을 내장하고 있지는 않지만, 외부 라이브러리를 통해 다양한 차트와 그래프를 쉽게 구현할 수 있습니다. 대표적인 차트 라이브러리로는 다음과 같은 패키지들이 있습니다:

• fl_chart: 다양한 종류의 차트(라인, 막대, 파이 등)를 제공하는 Flutter의 가장 널리 사용되는 차트 라이브러리.
• charts_flutter: Google에서 제공하는 차트 라이브러리로, 다양한 데이터 시각화 기능을 제공.
• syncfusion_flutter_charts: 복잡한 차트와 그래프 기능을 제공하는 유료/무료 라이브러리.

이 글에서는 가장 많이 사용되는 fl_chart 라이브러리를 중심으로 기본적인 차트 사용 방법을 소개하겠습니다.

2. fl_chart 패키지 설치

fl_chart는 다양한 차트를 제공하는 Flutter의 인기 차트 라이브러리입니다. 먼저 pubspec.yaml 파일에 fl_chart 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.40.0

그다음 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

3. fl_chart 사용하기: 기본적인 라인 차트(Line Chart)

fl_chart는 다양한 차트 유형을 제공하지만, 가장 기본적인 차트인 라인 차트부터 시작해보겠습니다. 라인 차트는 주로 시간에 따른 변화나 추세를 시각화하는 데 사용됩니다.

 

3.1 라인 차트 구현 예제

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LineChartExample(),
    );
  }
}

class LineChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Line Chart Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LineChart(
          LineChartData(
            lineBarsData: [
              LineChartBarData(
                spots: [
                  FlSpot(0, 1),
                  FlSpot(1, 1.5),
                  FlSpot(2, 1.4),
                  FlSpot(3, 3.4),
                  FlSpot(4, 2),
                  FlSpot(5, 2.2),
                  FlSpot(6, 1.8),
                ],
                isCurved: true,  // 곡선 처리
                colors: [Colors.blue],
                barWidth: 4,
                isStrokeCapRound: true,
                dotData: FlDotData(show: false),  // 점 표시 제거
                belowBarData: BarAreaData(show: false),  // 아래 영역 제거
              ),
            ],
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(showTitles: true, reservedSize: 22),
              ),
              leftTitles: AxisTitles(
                sideTitles: SideTitles(showTitles: true, reservedSize: 28),
              ),
            ),
            borderData: FlBorderData(show: true),
            gridData: FlGridData(show: true),
          ),
        ),
      ),
    );
  }
}

• FlSpot: 차트에 표시할 데이터 포인트를 정의합니다. FlSpot(x, y) 형식으로 데이터를 입력합니다.
• LineChartBarData: 차트의 스타일을 설정하는 곳으로, 선의 굵기, 곡선 처리, 색상 등을 정의할 수 있습니다.
• LineChartData: 차트의 전체 데이터를 설정하는 클래스입니다. 축의 타이틀과 그리드 스타일 등을 설정할 수 있습니다.

이 코드는 기본적인 라인 차트를 화면에 표시하며, 좌표값에 따라 데이터가 라인으로 연결되어 시각화됩니다.

 

 

반응형

 

4. 막대 차트(Bar Chart) 구현

막대 차트(Bar Chart)는 데이터를 막대 형태로 시각화하여 항목 간의 비교를 쉽게 할 수 있습니다. fl_chart를 사용하여 막대 차트를 생성할 수 있습니다.

4.1 막대 차트 구현 예제

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

class BarChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bar Chart Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BarChart(
          BarChartData(
            barGroups: [
              BarChartGroupData(x: 0, barRods: [BarChartRodData(y: 8, colors: [Colors.blue])]),
              BarChartGroupData(x: 1, barRods: [BarChartRodData(y: 10, colors: [Colors.red])]),
              BarChartGroupData(x: 2, barRods: [BarChartRodData(y: 14, colors: [Colors.green])]),
              BarChartGroupData(x: 3, barRods: [BarChartRodData(y: 15, colors: [Colors.purple])]),
              BarChartGroupData(x: 4, barRods: [BarChartRodData(y: 13, colors: [Colors.orange])]),
            ],
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  getTitlesWidget: (value, meta) {
                    switch (value.toInt()) {
                      case 0:
                        return Text('Mon');
                      case 1:
                        return Text('Tue');
                      case 2:
                        return Text('Wed');
                      case 3:
                        return Text('Thu');
                      case 4:
                        return Text('Fri');
                      default:
                        return Text('');
                    }
                  },
                  reservedSize: 32,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

• BarChart: 막대 차트를 생성하는 위젯입니다.
• BarChartGroupData: 막대 그룹 데이터를 정의하는 클래스입니다. 각 x 값에 대한 막대의 높이(y)와 색상을 지정합니다.
• BarChartRodData: 각 막대의 데이터를 정의하는 클래스입니다. 막대의 길이, 색상 등을 설정합니다.

이 예제는 요일별로 데이터를 막대 차트로 표현하며, 각 막대는 다른 색상으로 시각화됩니다.

 

 

728x90

 

5. 파이 차트(Pie Chart) 구현

파이 차트는 데이터 비율을 시각화하는 데 유용하며, 전체 대비 각 항목의 비율을 직관적으로 보여줍니다.

5.1 파이 차트 구현 예제

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

class PieChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pie Chart Example')),
      body: Center(
        child: PieChart(
          PieChartData(
            sections: [
              PieChartSectionData(
                value: 40,
                color: Colors.blue,
                title: '40%',
                radius: 60,
                titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
              ),
              PieChartSectionData(
                value: 30,
                color: Colors.red,
                title: '30%',
                radius: 60,
                titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
              ),
              PieChartSectionData(
                value: 20,
                color: Colors.green,
                title: '20%',
                radius: 60,
                titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
              ),
              PieChartSectionData(
                value: 10,
                color: Colors.orange,
                title: '10%',
                radius: 60,
                titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
              ),
            ],
            centerSpaceRadius: 40,
          ),
        ),
      ),
    );
  }
}

• PieChart: 파이 차트를 생성하는 위젯입니다.
• **PieChartSectionData

**: 파이 차트에서 각 섹션의 데이터를 정의합니다. value는 해당 섹션의 비율을, color는 색상을 설정합니다.

• centerSpaceRadius: 파이 차트의 중앙에 빈 공간을 만들기 위해 설정할 수 있습니다.

이 예제는 각 섹션이 다른 비율을 나타내는 파이 차트를 시각화합니다.

6. 다른 차트 유형

fl_chart는 라인 차트, 막대 차트, 파이 차트 외에도 다양한 차트 유형을 제공합니다. 예를 들어, **산점도(Scatter Chart)**나 레이더 차트(Radar Chart) 등 복잡한 데이터를 표현하는 데 필요한 차트도 구현할 수 있습니다.

7. 상호작용 기능 추가

차트에 상호작용 기능을 추가하면 사용자 경험을 크게 향상시킬 수 있습니다. fl_chart는 기본적인 상호작용 기능(예: 터치로 데이터 값 표시)을 제공합니다. 아래는 차트에 터치 기능을 추가하는 간단한 예제입니다.

7.1 터치 이벤트 추가 예제

LineChart(
  LineChartData(
    lineBarsData: [
      LineChartBarData(
        spots: [
          FlSpot(0, 1),
          FlSpot(1, 1.5),
          FlSpot(2, 1.4),
          FlSpot(3, 3.4),
        ],
        isCurved: true,
        colors: [Colors.blue],
      ),
    ],
    lineTouchData: LineTouchData(
      touchTooltipData: LineTouchTooltipData(
        tooltipBgColor: Colors.blueAccent,
      ),
      touchCallback: (FlTouchEvent event, LineTouchResponse? touchResponse) {
        if (touchResponse != null && touchResponse.lineBarSpots != null) {
          final touchedSpot = touchResponse.lineBarSpots!.first;
          print('Touched spot: ${touchedSpot.x}, ${touchedSpot.y}');
        }
      },
    ),
  ),
);

• LineTouchData: 차트의 터치 상호작용을 설정합니다.
• LineTouchTooltipData: 터치했을 때 나타나는 툴팁의 스타일을 정의합니다.
• touchCallback: 사용자가 차트를 터치할 때 호출되는 콜백 함수로, 터치된 좌표의 정보를 받아 처리할 수 있습니다.

결론

Flutter에서 그래프와 차트를 사용하여 데이터를 시각화하는 것은 매우 유용하며, 이를 통해 사용자가 데이터를 쉽게 이해할 수 있습니다. fl_chart 라이브러리는 다양한 차트 유형(라인 차트, 막대 차트, 파이 차트 등)을 제공하여 데이터를 시각화하는 데 필요한 도구를 간편하게 제공합니다. 이번 글에서 다룬 차트 예제를 기반으로, Flutter 애플리케이션에서 효과적인 데이터 시각화를 구현해보세요.