シンプルな円グラフを作成

A .はじめに
最後の章では、簡単な円グラフを作成しますFL Chart Package .


パイチャートを作成する

If you already read my previous tutorial about and bar chart, you can skip step 1 - 4.

1)VSコードやAndroid Studioのようなテキストエディタでフラッタプロジェクトを作成します.新しいFlutterプロジェクトを作成する詳細については、このリンクを参照できます.How To Create new Flutter Project
2 )以下のコマンドを使用してFLのグラフをインストールします.

flutter pub add fl_chart

3)インlib フォルダー、新しいファイル名chart_container.dart 以下のコードを挿入します.

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

class ChartContainer extends StatelessWidget {
  final Color color;
  final String title;
  final Widget chart;

  const ChartContainer({
    Key? key,
    required this.title,
    required this.color,
    required this.chart,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: MediaQuery.of(context).size.width * 0.95,
        height: MediaQuery.of(context).size.width * 0.95 * 0.65,
        padding: EdgeInsets.fromLTRB(0, 10, 20, 10),
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              title,
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold),
            ),
            Expanded(
                child: Container(
              padding: EdgeInsets.only(top: 10),
              child: chart,
            ))
          ],
        ),
      ),
    );
  }
}

解説

ChartContainer クラスは、グラフを保存し、繰り返し同じコードを書くことを避けるために作成されました.

class ChartContainer extends StatelessWidget

4)新しいフォルダを作るchart and chart_data 内部lib フォルダ.
5)オープンmain.dart インlib 次に、以下のコードを書きます.

import 'package:fl_chart_tutorial/chart/pie_chart.dart';
import 'package:fl_chart_tutorial/chart_container.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FL Chart Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: MyHomePage(title: 'FL Chart Tutorial'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          color: Color(0xfff0f0f0),
          child: ListView(
            padding: EdgeInsets.fromLTRB(0, 30, 0, 30),
            children: <Widget>[
              ChartContainer(
                title: 'Pie Chart', 
                color: Color(0xff24b273), 
                chart: PieChartContent()
              ), 
            ],
          ),
        ));
  }
}

6)円グラフを描画するには、pie_chart.dart 次に、StatelessWidgetクラスという名前のクラスを作成しますPieChartContent .pie_chart.dart

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

class PirChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PieChart(
      PieChartData(),
    );
  }
}

7)次に、再び新しいファイルを作りますpie_chart_data.dart . 作成したファイルで、pieChartSectionData 円グラフのセクションデータを含むリスト.pie_chart_data.dart

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

List<PieChartSectionData> pieChartSectionData = [
  PieChartSectionData(
      value: 20,
      title: '20%',
      color: Color(0xffed733f),
    ),
    PieChartSectionData(
      value: 35,
      title: '35%',
      color: Color(0xff584f84),
    ),
    PieChartSectionData(
      value: 15,
      title: '15%',
      color: Color(0xffd86f9b),
    ),
    PieChartSectionData(
      value: 30,
      title: '30%',
      color: Color(0xffa2663e),
    ),
];

解説

PieChartSectionData FLチャートパッケージで円グラフセクションを描画するウィジェットです.

の使い方value プロパティはセクションの重みを決定することです.

8 )セクションのデータのリストを作成した後、我々はPieChartData ウィジェットpie_chart.dart .
行の上にインポートコードを追加することを忘れないでください.

import 'package:fl_chart_tutorial/chart_data/pie_chart_data.dart';

含めるpieChartSectionata リスト.

sections: pieChartSectionData

コードはこのようになります.pie_chart.dart

import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/pie_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class PieChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PieChart(PieChartData(
      sections: pieChartSectionData
    ));
  }
}

出力:

9 )次に、各セクション間の円グラフとスペースの中心空間を削除する必要があります.
パイグラフの中心スペースをcenterSpaceRadius を0にする.

centerSpaceRadius: 0

の間のスペースをsectionsSpace を0にする.

sectionsSpace: 0

コード:

import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/pie_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class PieChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PieChart(PieChartData(
      centerSpaceRadius: 0,
      sectionsSpace: 0,
      sections: pieChartSectionData
    ));
  }
}

出力:

10 )最後の出力画像で見ることができるように、円グラフサイズは小さく見えます.サイズを広げるには、それぞれのセクションの半径をpieChartSectionData デバイスの画面幅に基づきます.
そのようにするためには、コードの変更が必要ですpie_chart_data.dart ファイルを返します.list<PieChartSectionData> 種類pie_chart_data.dart

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

List<PieChartSectionData> getSectionData(double screenWidth) {
  double radius = screenWidth / 4.44;

  return [
    PieChartSectionData(
      value: 20,
      title: '20%',
      radius: radius,
      color: Color(0xffed733f),
    ),
    PieChartSectionData(
      value: 35,
      title: '35%',
      radius: radius,
      color: Color(0xff584f84),
    ),
    PieChartSectionData(
      value: 15,
      title: '15%',
      radius: radius,
      color: Color(0xffd86f9b),
    ),
    PieChartSectionData(
      value: 30,
      title: '30%',
      radius: radius,
      color: Color(0xffa2663e),
    ),
  ];
}

解説

getSectionData 関数はdouble 変数screenWidth . このパラメータは、各円グラフセクションの半径値を決定するために使用されます.

11)ラストオープンpie_chart.dart ファイルと変更sections によるプロパティ値getSectionData 関数.

MediaQuery.of(context).size.width syntax is used to retrieve the device screen width.

sections: getSectionData(MediaQuery.of(context).size.width)

の最終的なコードpie_chart.dart

import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/pie_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class PieChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PieChart(PieChartData(
      sectionsSpace: 0,
      centerSpaceRadius: 0,
      sections: getSectionData(MediaQuery.of(context).size.width)
    ));
  }
}

最終出力:


c .結論
これはフラッターチャートシリーズの最後のチュートリアルです.私はこのチュートリアルでは、フラッターで円グラフを作成するのに役立ちます願っています.
このチュートリアルについての詳細は、このリンクで私のgithub repoをチェックしてください.Source Code of Fl Chart Tutorial
また、Fl Chartパッケージの詳細については、ドキュメントリンクを参照できます.Fl Chart Documentation