[flutter] flutter_pie를 사용한 도넛 차트 그리기

이번 포스트에서는 Flutter 앱에서 flutter_pie 패키지를 사용하여 도넛 차트를 그리는 방법을 알아보겠습니다.

1. flutter_pie 패키지 추가하기

먼저, pubspec.yaml 파일에 flutter_pie 패키지를 추가해야합니다. 다음과 같이 dependencies 섹션에 패키지를 추가하세요:

dependencies:
  flutter_pie: ^1.0.0

변경 사항을 적용하기 위해 패키지를 설치해주세요:

flutter packages get

2. 도넛 차트 생성하기

이제 Flutter 앱 내에서 도넛 차트를 생성할 수 있습니다. 먼저, main.dart 파일에서 flutter_pie 패키지를 가져오세요:

import 'package:flutter_pie/flutter_pie.dart';

그런 다음, 도넛 차트 위젯을 생성합니다. 다음은 예시 코드입니다:

PieChart chart = PieChart(
  dataMap: {
    "Flutter": 40,
    "Dart": 30,
    "Java": 20,
    "Kotlin": 10,
  },
  colorList: [Colors.blue, Colors.green, Colors.orange, Colors.red],
  animationDuration: Duration(milliseconds: 800),
  chartRadius: 100,
  chartType: ChartType.ring,
);

dataMap 속성에는 도넛 차트에 표시될 데이터와 해당 값이 포함되어 있습니다. colorList 속성은 섹션 별로 사용될 색상 목록을 나타냅니다. animationDuration은 차트 애니메이션의 길이를 조정합니다. chartRadius는 차트의 반지름을 지정하며, chartType은 차트의 형태를 선택합니다.

3. 앱에 도넛 차트 추가하기

마지막으로, 도넛 차트 위젯을 앱에 추가합니다. 예시 코드에서는 Scaffold 위젯의 body 속성에 도넛 차트를 추가합니다. 다음은 전체 예시 코드입니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PieChart chart = PieChart(
      dataMap: {
        "Flutter": 40,
        "Dart": 30,
        "Java": 20,
        "Kotlin": 10,
      },
      colorList: [Colors.blue, Colors.green, Colors.orange, Colors.red],
      animationDuration: Duration(milliseconds: 800),
      chartRadius: 100,
      chartType: ChartType.ring,
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("도넛 차트"),
        ),
        body: Center(
          child: chart,
        ),
      ),
    );
  }
}

이제 앱을 실행하면 도넛 차트가 표시될 것입니다.

결론

이제 flutter_pie 패키지를 사용하여 Flutter 앱에서 도넛 차트를 그리는 방법을 알아보았습니다. 코드를 따라하며 도넛 차트를 커스터마이징하여 원하는 대로 표시할 수 있습니다.