【Flutter】charts_flutter로 그래프를 만들어 볼게요.

배경.

개발 환경 및 조건

개발 내용

가상 데이터로 사전 준비

위치 보기

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);

  @override
  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()),
	 ),
       )
     );
  }
}

모델의 곳(샘플)

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),
  ];
}

데이터 기반

class ChartData{
  DateTime? date;
  int? value;

  ChartData({this.date, this.value});
}