2025/4/1

【Flutter/Dart】fl_chartでグラフUIの実装方法！折れ線/円/棒/散布図

この記事からわかること

Flutter/DartのグラフUIの実装方法
fl_chartパッケージの導入と使い方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Koala
Xcode：16.0
Flutter：3.29.2
Dart：3.7.2
fl_chart： 0.70.2
Mac M1：Sonoma 14.6.1

fl_chartパッケージでグラフUI実装

Flutterで棒グラフや折れ線グラフ、円グラフなどを実装したい場合はfl_chartパッケージが活用できます。fl_chartでは複数のグラフ表示やX軸/Y軸ラベルのカスタマイズ、アニメーションなど豊富な機能を簡単に実装することが可能です。

導入

pub.dev：fl_chart

Flutterでfl_chartを利用できるようにするために以下のコマンドを実行してパッケージを導入します。

$ flutter pub add fl_chart

これでパッケージの導入が完了し、import文を追加すれば使用できるようになります。

import 'package:fl_chart/fl_chart.dart';

折れ線グラフの実装方法

fl_chartでは各グラフを実装するためのWidgetが用意されています。例えば折れ線グラフでいうとLineChartというWidgetの中にLineChartData、さらにその中にLineChartBarDataを配置し、実際のデータをFlSpotで指定します。

LineChart(LineChartData(lineBarsData: [LineChartBarData(spots: [FlSpot])]))

それぞれの役割は以下のとおりです。

LineChart・・・グラフ全体を表示するウィジェット
LineChartData・・・グラフのデータ・デザインの設定(軸のラベル、グリッド線、境界線など)
LineChartBarData・・・折れ線のデザインとデータ点を設定(線の色、太さ、曲線、データ (FlSpot))
FlSpot・・・実際のデータ

全体コードで見ると以下のような感じです。

class ChartView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: 300,
          // ここからがグラフの実装
          child: LineChart(
            LineChartData(
              lineBarsData: [
                LineChartBarData(
                  spots: [
                    FlSpot(0, 1),
                    FlSpot(1, 3),
                    FlSpot(2, 2),
                    FlSpot(3, 5),
                  ],
                  // 線を滑らかにする
                  isCurved: true, 
                  // 線の太さ
                  barWidth: 3, 
                   // 線の色
                  color: Colors.blueGrey,
                ),
              ],
            ),
          ),
        ),
      )
    );
  }
}

LineChartData(lineBarsData:[])は配列でLineChartBarDataを指定できるので1つのグラフエリアの中に複数の折れ線グラフを表示させることなども可能になっています。

X軸・Y軸ラベルのカスタマイズ

グラフのX軸とY軸ラベルをカスタマイズしたい場合はLineChartData(titlesData)からFlTitlesData型で設定します。デフォルトでは上下左右全てにラベルが表示されており、それぞれtopTitlesやrightTitlesなどからSideTitles型でカスタマイズすることが可能になっています。

LineChartData(
  titlesData: FlTitlesData(
    // 上ラベル
    topTitles: AxisTitles(
      sideTitles: SideTitles(
        // 非表示
        showTitles: false, 
      ),
    ),
    // 右ラベル   
    rightTitles: AxisTitles(
      sideTitles: SideTitles(
        showTitles: false,
      ),
    ),
    // 左ラベル   
    leftTitles: AxisTitles(
      sideTitles: SideTitles(
        showTitles: false,
      ),
    ),
    // 下ラベル   
    bottomTitles: AxisTitles(
      sideTitles: SideTitles(
        showTitles: true,
        getTitlesWidget: (value, meta) {
          return Text("2025/${value.toInt() + 1}");
        },
      ),
    ),
      lineBarsData: []
  )
)

AxisTitles

AxisTitles型からは軸ラベル名やラベル名の文字サイズ、軸に表示する値を制御するSideTitlesなどを変更できます。

const AxisTitles({
    this.axisNameWidget,
    this.axisNameSize = 16,
    this.sideTitles = const SideTitles(),
    this.drawBelowEverything = true,
  });

SideTitles

SideTitles型からはラベル自体の表示/非表示や値のフォーマットなどを変更できます。

const SideTitles({
  this.showTitles = false,  // 軸のラベルを表示するか
  this.getTitlesWidget = defaultGetTitle, // ラベルの表示方法をカスタマイズ
  this.reservedSize = 22, // ラベルの領域（高さ・幅）
  this.interval, // ラベルの間隔 (目盛りの間隔)
  this.minIncluded = true, // 最小値 (Y軸の一番下) を含むか
  this.maxIncluded = true, // 最大値 (Y軸の一番上) を含むか
})

棒グラフ

棒グラフを実装するにはBarChartを使用します。BarChartDataの中にはBarChartGroupDataを複数配置することができ、BarChartGroupData1つに複数のY値を指定することも可能になっています。

BarChart(
  BarChartData(
    barGroups: [
      BarChartGroupData(
        x: 0,
        barRods: [BarChartRodData(toY: 2, color: Colors.blue)],
      ),
      BarChartGroupData(
        x: 1,
        barRods: [BarChartRodData(toY: 5, color: Colors.blue)],
      ),
      BarChartGroupData(
        x: 2,
        barRods: [BarChartRodData(toY: 7, color: Colors.blue)],
      ),
      BarChartGroupData(
        x: 3,
        barRods: [
          BarChartRodData(toY: 8, color: Colors.green),
          BarChartRodData(toY: 4, color: Colors.green),
          BarChartRodData(toY: 2, color: Colors.green),
        ],
      ),
    ],
  ),
)

円グラフ

円グラフを実装するにはPieChartを使用します。PieChartDataの中にはPieChartSectionDataを複数配置することができ、valueの値で円に占めるパーセンテージをコントロールします。

PieChart(
  PieChartData(
    sections: [
      PieChartSectionData(
        value: 40,
        color: Colors.blue,
        title: "40%",
      ),
      PieChartSectionData(
        value: 30,
        color: Colors.green,
        title: "30%",
      ),
      PieChartSectionData(value: 30, color: Colors.red, title: "30%"),
    ],
  ),
)

散布図

散布図を実装するにはScatterChartを使用します。ScatterChartDataの中に実際の実データとなるScatterSpotを指定します。

ScatterChart(
  ScatterChartData(
    scatterSpots: [
      ScatterSpot(1, 3),
      ScatterSpot(2, 5),
      ScatterSpot(3, 4),
      ScatterSpot(4, 2),
      ScatterSpot(5, 5),
      ScatterSpot(6, 7),
      ScatterSpot(7, 1),
    ],
  ),
)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。