Flutterでcharts_flutterを用いて折れ線グラフを表示させる方法

完成画像

横軸：日付，縦軸：体重

はじめに

例えば体重を記録するアプリを作りたいな～って思ったときに折れ線グラフは必須ですよね！

その時に必要となるライブラリが　charts_flutter　です！！

これを使えば折れ線グラフ以外にも様々なグラフが作れるんですね～，非常に便利ッ！！

今回は横軸を日付，縦軸を体重として想定した折れ線グラフを作っていきます！

実装

まずはcharts_flutterからインストールしましょう！　pubspec.yamlに記述してPub get!

pubspec.yaml

dependencies:
 charts_flutter: ^0.10.0

　
今回はコピペで使えるようにコードを書いてみました。
とにかく動かしてみたいという人はmain.dartにこれをコピペしてみましょう！

main.dart

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GraphPage(),
    );
  }
}

class WeightData {
  final DateTime date;
  final double weight;

  WeightData(this.date, this.weight);
}

class GraphPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('折れ線グラフだお'),
            Container(
              height: 500,
              child: charts.TimeSeriesChart(
                _createWeightData(weightList),
              ),
            ),
          ],
        ),
      ),
    );
  }

  final weightList = <WeightData>[
    WeightData(DateTime(2020, 10, 2), 50),
    WeightData(DateTime(2020, 10, 3), 53),
    WeightData(DateTime(2020, 10, 4), 40)
  ];

  List<charts.Series<WeightData, DateTime>> _createWeightData(
      List<WeightData> weightList) {
    return [
      charts.Series<WeightData, DateTime>(
        id: 'Muscles',
        data: weightList,
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        domainFn: (WeightData weightData, _) => weightData.date,
        measureFn: (WeightData weightData, _) => weightData.weight,
      )
    ];
  }
}

少し解説

main.dart

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GraphPage(),
    );
  }
}

///日付と体重を持つクラスを作成
class WeightData {
  final DateTime date;
  final double weight;

  WeightData(this.date, this.weight);
}

///表示するページ
class GraphPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('折れ線グラフだお'),
            Container(
              height: 500,
           //グラフ表示部分
              child: charts.TimeSeriesChart(
                _createWeightData(weightList),
              ),
            ),
          ],
        ),
      ),
    );
  }

//WeightDataのリストを作成。好きな日付と体重入れよう
  final weightList = <WeightData>[
    WeightData(DateTime(2020, 10, 2), 50),
    WeightData(DateTime(2020, 10, 3), 53),
    WeightData(DateTime(2020, 10, 4), 40)
  ];

//上のリストからグラフに表示させるデータを生成
  List<charts.Series<WeightData, DateTime>> _createWeightData(
      List<WeightData> weightList) {
    return [
      charts.Series<WeightData, DateTime>(
        id: 'Muscles',
        data: weightList,
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        domainFn: (WeightData weightData, _) => weightData.date,
        measureFn: (WeightData weightData, _) => weightData.weight,
      )
    ];
  }
}

さいごに

今回は限りなくシンプルなグラフを作りましたが，こちらのようにいろいろなグラフを作ることが可能です！皆さんも試してみてください！

あとは体重を入力する機能などをつければ簡単に体重記録アプリを作ることができます！
頑張って作ってみましょう！
最後まで読んでいただきありがとうございました！！