완성된 이미지

가로축: 날짜, 세로축: 체중

소개

예를 들어 체중을 기록하는 앱을 만들고 싶다 ~라고 생각했을 때에 꺾은 선 그래프는 필수군요!

그 때에 필요한 라이브러리가 charts_flutter 입니다! !

이것을 사용하면 꺾은 선 그래프 이외에도 다양한 그래프를 만들 수 있네요 ~, 매우 편리! !

이번에는 가로축을 날짜, 세로축을 체중으로 가정한 꺾은선형 차트를 만들어 갑니다!

구현

우선 charts_flutter 에서 설치합시다! pubspec.yaml에 기술하고 Pub get!

pubspec.yaml

dependencies:
 charts_flutter: ^0.10.0

　
이번에는 copipe에서 사용할 수 있도록 코드를 작성해 보았습니다.
어쨌든 움직이고 싶다는 사람은 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,
      )
    ];
  }
}

사이고에게

이번에는 한없이 간단한 그래프를 만들었습니다만, 여기 와 같이 여러가지 그래프를 만드는 것이 가능합니다! 여러분도 시험해 보세요!

그리고는 체중을 입력하는 기능 등을 붙이면 쉽게 체중 기록 앱을 만들 수 있습니다!
열심히 만들어 봅시다!
끝까지 읽어 주셔서 감사합니다! !