[flutter] flutter_pie를 활용한 앱의 통계 및 분석 기능 구현 방법

이번에는 Flutter 앱에 통계 및 분석 기능을 구현하는 방법에 대해 알아보겠습니다. 여기서는 flutter_pie 라이브러리를 사용하여 파이 차트를 구현하는 방법을 다룰 것입니다.

1. flutter_pie 라이브러리란?

flutter_pie는 Flutter에서 파이 차트를 생성하고 표시하는 데 사용되는 라이브러리입니다. 이 라이브러리를 사용하면 간단하게 파이 차트를 구현할 수 있으며, 데이터를 시각화하여 앱의 통계 및 분석 기능을 개발할 수 있습니다.

2. flutter_pie 라이브러리 설치하기

먼저, 프로젝트의 pubspec.yaml 파일에 flutter_pie 라이브러리를 추가해야 합니다. 아래와 같이 의존성을 추가해주세요.

dependencies:
  flutter_pie: ^2.1.0

그리고 Flutter 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 라이브러리를 설치합니다.

flutter pub get

3. 파이 차트 구현하기

flutter_pie 라이브러리를 사용하여 파이 차트를 구현하는 방법을 알아보겠습니다. 먼저, 파이 차트를 표시할 화면 위젯을 생성해주세요. 예를 들면, StatisticsPage라는 이름의 StatelessWidget을 생성합니다.

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

class StatisticsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Data> data = [
      Data('Category A', 30, Color(0xFF42A5F5)),
      Data('Category B', 20, Color(0xFF9CCC65)),
      Data('Category C', 25, Color(0xFFE53935)),
      Data('Category D', 15, Color(0xFFFFC107)),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('Statistics'),
      ),
      body: Center(
        child: FlutterPie(
          data: data,
          strokeColor: Colors.white,
          strokeWidth: 2.0,
          legendTextColor: Colors.black,
          legendFontSize: 14.0,
        ),
      ),
    );
  }
}

위의 코드에서, data 리스트에는 파이 차트에 표시할 데이터를 저장합니다. Data 클래스의 인스턴스를 생성하여 이름, 값, 색상을 설정합니다. 이 예제에서는 4개의 카테고리 데이터를 생성했습니다.

FlutterPie 위젯을 사용하여 파이 차트를 표시합니다. data 속성에는 앞에서 생성한 데이터를 전달하고, strokeColor, strokeWidth, legendTextColor, legendFontSize 등의 속성을 통해 파이 차트의 스타일을 설정할 수 있습니다.

4. StatisticsPage를 앱에 추가하기

StatisticsPage를 앱 내의 다른 화면에서 호출하고 표시하려면, 필요에 따라 라우트를 정의하고 해당 화면으로 이동하는 코드를 작성해야 합니다.

예를 들어, 앱의 메인 화면에서 StatisticsPage로 이동하는 버튼을 추가하려면 다음과 같이 코드를 작성할 수 있습니다.

FlatButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => StatisticsPage()),
    );
  },
  child: Text('View Statistics'),
)

이제 앱에서 “View Statistics” 버튼을 클릭하면 StatisticsPage로 이동하여 파이 차트를 확인할 수 있습니다.

5. 정리

flutter_pie 라이브러리를 사용하여 Flutter 앱에 통계 및 분석 기능을 구현하는 방법에 대해 알아보았습니다. 이를 통해 간단하게 파이 차트를 구현하고 데이터를 시각화할 수 있습니다. 데이터의 잘못된 입력이나 파이 차트를 포함한 다양한 시각화 기능을 구현하려면 추가적인 코드 수정이 필요할 수 있습니다. 더 자세한 내용은 flutter_pie 라이브러리 Github 페이지를 참고하세요.

참고 자료