【Flutter】charts_flutterでグラフを作成してみる
背景
現在就活のアプリを作成しており、ユーザーの就活の状況の進捗が確認できるようなウィジェットを作成してみたいと思い、適当なメモ用に作成したいと思います。
開発環境・条件
- Flutter 2.10.4
- Dart 2.16.2
- charts_flutter 0.12.0
- Riverpod + ConsumerWidget + ChangeNotifier
開発内容
- firebaseでユーザーの情報を取得する
- ユーザー情報のデータ整形する
- データをグラフに表示させる
ダミーデータで下準備
ビューのところ
dashbord.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:sampleApp/domain/chart_data.dart';
import 'package:sampleApp/view_models/dashbord/dashbord_model.dart';
import 'package:charts_flutter/flutter.dart' as charts;
final _dashBordModel = ChangeNotifierProvider((ref) => DashBordModel());
class DashBord extends ConsumerWidget {
const DashBord({Key? key}) : super(key: key);
Widget build(BuildContext context, WidgetRef ref) {
final model = ref.watch(_dashBordModel);
return Scaffold(
body:chart(dataList: model.done,)
);
}
static Widget chart({required List<ChartData> dataList}) {
List<charts.Series<ChartData, String>> _series = [
charts.Series<ChartData, String>(
id: "sample",
data: dataList,
domainFn: (_sample, _) => _sample.date.toString(),
measureFn: (_sample, _) => _sample.value,
colorFn: (_, __) => charts.ColorUtil.fromDartColor(Colors.grey),
)
];
return SizedBox(
height: 80,
child: charts.BarChart(
_series,
layoutConfig: charts.LayoutConfig(
leftMarginSpec: charts.MarginSpec.fixedPixel(0),
topMarginSpec: charts.MarginSpec.fixedPixel(20),
rightMarginSpec: charts.MarginSpec.fixedPixel(0),
bottomMarginSpec: charts.MarginSpec.fixedPixel(0),
),
primaryMeasureAxis: const charts.NumericAxisSpec(
renderSpec: charts.NoneRenderSpec()),
domainAxis: const charts.OrdinalAxisSpec(
showAxisLine: false, renderSpec: charts.NoneRenderSpec()),
),
)
);
}
}
モデルのとこ（とりまサンプル）
dashbord_model.dart
import 'package:flutter/material.dart';
import 'package:sampleApp/domain/chart_data.dart';
class DashBordModel extends ChangeNotifier{
List<ChartData> done = [
ChartData(date: DateTime.now(),value: 20),
ChartData(date: DateTime.now().subtract(Duration(days: -2)),value: 11),
ChartData(date: DateTime.now().subtract(Duration(days: -3)),value: 15),
ChartData(date: DateTime.now().subtract(Duration(days: -4)),value: 20),
];
}
データのベースのやつ
chart_data.dart
class ChartData{
DateTime? date;
int? value;
ChartData({this.date, this.value});
}
Author And Source
この問題について(【Flutter】charts_flutterでグラフを作成してみる), 我々は、より多くの情報をここで見つけました https://zenn.dev/mikaneko/articles/5e563bf370ba0f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol