Flutter에서 Pie Chart 사용법

Flutter 애플리케이션에서 데이터를 시각적으로 표현하기 위해 가장 많이 사용되는 차트 중 하나가 Pie Chart(파이 차트)입니다. 파이 차트는 데이터를 비율로 나타내며, 각 항목의 크기나 비율을 직관적으로 확인할 수 있게 도와줍니다. 이번 글에서는 Flutter에서 fl_chart 라이브러리를 사용하여 파이 차트를 구현하는 방법을 단계별로 설명하겠습니다.

1. Flutter에서 Pie Chart 구현하기

Flutter는 기본적으로 차트 기능을 제공하지 않기 때문에, 외부 라이브러리를 사용해야 합니다. fl_chart는 Flutter에서 그래프와 차트를 쉽게 구현할 수 있게 해주는 라이브러리 중 하나입니다. 먼저, 이 라이브러리를 프로젝트에 추가하는 방법부터 시작하겠습니다.

1.1 fl_chart 패키지 설치

Flutter 프로젝트의 pubspec.yaml 파일에 fl_chart 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.40.0  # 최신 버전을 사용하세요.

그런 다음, 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. 기본적인 Pie Chart 구현

파이 차트는 데이터를 섹션별로 나누어 비율을 시각화합니다. fl_chart 라이브러리를 사용하면 Flutter에서 손쉽게 파이 차트를 그릴 수 있습니다.

2.1 간단한 Pie Chart 구현

아래는 Flutter에서 기본적인 파이 차트를 생성하는 예제입니다.

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: PieChartExample(),
    );
  }
}

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,  // 파이 차트의 가운데 빈 공간
            sectionsSpace: 2,  // 각 섹션 사이의 간격
          ),
        ),
      ),
    );
  }
}

• PieChartSectionData: 파이 차트의 각 섹션을 정의합니다. value는 해당 섹션의 비율을 나타내며, color는 색상, title은 섹션에 표시할 텍스트를 지정합니다.
• centerSpaceRadius: 파이 차트의 중심에 빈 공간을 설정하는 속성입니다.
• sectionsSpace: 각 섹션 사이의 간격을 설정합니다.

위 예제는 파이 차트를 구성하는 네 개의 섹션(40%, 30%, 20%, 10%)을 시각화합니다. 각 섹션은 고유한 색상과 비율을 가지며, 중앙에는 빈 공간이 표시됩니다.

 

 

반응형

 

3. 파이 차트에 상호작용 기능 추가하기

파이 차트는 기본적으로 데이터를 시각화하는 데 사용되지만, 상호작용을 추가하면 사용자가 차트에서 더 많은 정보를 얻을 수 있습니다. fl_chart 라이브러리는 터치 이벤트를 지원하여 차트에 상호작용 기능을 쉽게 추가할 수 있습니다.

 

3.1 터치 상호작용 추가

차트에 터치 이벤트를 추가하면, 사용자가 특정 섹션을 클릭할 때 강조 표시되거나 툴팁을 표시할 수 있습니다.

class InteractivePieChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Interactive Pie Chart')),
      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,
            sectionsSpace: 2,
            pieTouchData: PieTouchData(
              touchCallback: (FlTouchEvent event, pieTouchResponse) {
                if (event.isInterestedForInteractions && pieTouchResponse != null) {
                  final touchedSection = pieTouchResponse.touchedSection;
                  if (touchedSection != null) {
                    final index = touchedSection.touchedSectionIndex;
                    print('Touched section: $index');
                  }
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}

• PieTouchData: 파이 차트에서 터치 상호작용을 처리하는 속성입니다.
• touchCallback: 사용자가 차트를 터치했을 때 발생하는 콜백 함수입니다. 터치된 섹션의 정보를 통해 추가적인 처리를 할 수 있습니다.

위 예제에서는 사용자가 특정 섹션을 터치하면, 터치된 섹션의 인덱스를 출력하는 상호작용 기능이 추가되었습니다.

 

 

728x90

 

4. 파이 차트 커스터마이징

fl_chart는 파이 차트를 다양하게 커스터마이징할 수 있는 기능을 제공합니다. 차트의 섹션, 색상, 중앙 공간, 텍스트 스타일 등을 원하는 대로 설정할 수 있습니다.

 

4.1 파이 차트 커스터마이징 예제

class CustomPieChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Pie Chart')),
      body: Center(
        child: PieChart(
          PieChartData(
            sections: [
              PieChartSectionData(
                value: 45,
                color: Colors.purple,
                title: '45%',
                radius: 80,
                titleStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
              ),
              PieChartSectionData(
                value: 25,
                color: Colors.teal,
                title: '25%',
                radius: 80,
                titleStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
              ),
              PieChartSectionData(
                value: 15,
                color: Colors.yellow,
                title: '15%',
                radius: 80,
                titleStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
              ),
              PieChartSectionData(
                value: 15,
                color: Colors.pink,
                title: '15%',
                radius: 80,
                titleStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
              ),
            ],
            centerSpaceRadius: 50,
            sectionsSpace: 4,
          ),
        ),
      ),
    );
  }
}

• radius: 각 섹션의 크기를 조절할 수 있는 속성입니다.
• centerSpaceRadius: 차트 중앙에 비어 있는 공간의 크기를 조절할 수 있습니다.
• sectionsSpace: 파이 차트 섹

션 간의 간격을 설정할 수 있습니다.

위 예제는 파이 차트를 더 두껍게 표현하고, 중앙 공간을 크게 만드는 커스터마이징 예제입니다.

5. 파이 차트의 활용 사례

Flutter에서 파이 차트는 다음과 같은 상황에서 유용하게 사용될 수 있습니다:

• 매출 비율 분석: 각 제품의 매출 비율을 파이 차트로 시각화하여 어느 제품이 가장 많이 팔리는지 직관적으로 확인.
• 사용자 통계: 사용자 활동, 접속 비율 등을 시각화하여 대시보드 형태의 앱에 적용.
• 예산 분배: 프로젝트 또는 회사의 예산 분배 비율을 시각적으로 보여주기.

결론

Flutter에서 파이 차트를 구현하려면 fl_chart 라이브러리를 사용하여 간단하게 시각화할 수 있습니다. 기본적인 파이 차트에서 상호작용을 추가하거나, 다양한 커스터마이징 옵션을 통해 더 풍부한 사용자 경험을 제공할 수 있습니다. 이번 글에서 다룬 파이 차트 구현 예제를 통해 Flutter 애플리케이션에서 데이터 시각화를 더욱 효율적으로 구현해보세요.