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

この記事からわかること
- Flutter/DartのグラフUIの実装方法
- fl_chartパッケージの導入と使い方
index
[open]
\ アプリをリリースしました /
環境
- 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軸ラベルのカスタマイズ、アニメーションなど豊富な機能を簡単に実装することが可能です。
導入
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
を複数配置することができ、BarChartGroupData
1つに複数の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),
],
),
)
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。