[Flutter] 3. 표를 만들어보자

저번 시간까지 만든 부분들을 살펴보면 1페이지 통계 부분은 그냥 대충 아무거나 import해와서 만들어 놓은 것을 볼 수 있다. time chart라는 패키지를 이용하여 만들었는데, 오로지 수면시간에만 집중 되어 있는 것 같아, 다른 패키지를 통해 직접 UI 구성을 하기로 마음 먹었다.

원래 사용하던 차트

https://pub.dev/packages/syncfusion_flutter_charts

syncfusion_flutter_charts | Flutter Package

마침 구글링하다가 괜찮은 패키지를 발견해서 이 녀석을 활용해보기로 결정했다.

import 'package:syncfusion_flutter_charts/charts.dart';

패키지를 가져와서 개발을 시작해보았다.

어떻게 시작해야 할지 모르겠어서 고민 했지만 큰 패키지라 그런지 docs에 잘 설명이 되어 있었다.

https://help.syncfusion.com/flutter/cartesian-charts/overview

About Flutter Cartesian Charts widget | Syncfusion

아직도 데이터 처리하는 방법 로직은 생각하지 못했지만, 일단 괜찮은 chart 데이터의 발견에 일단 압도적 감사.. 요놈으로 개발 밀고 가면 될 것 같다.

//dart 기본 패키지
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

//dart chart 패키지
import 'package:syncfusion_flutter_charts/charts.dart';

class analyzePage extends StatefulWidget {
  const analyzePage({Key? key}) : super(key: key);

  @override
  State<analyzePage> createState() => _analyzePageState();
}


class _analyzePageState extends State<analyzePage> {
  late TooltipBehavior _tooltipBehavior;
  late ZoomPanBehavior _zoomPanBehavior;
  List<ChartData> chartData = [ChartData(3,23), ChartData(32,23),];
  ChartSeriesController? _chartSeriesController;

  @override
  void initState() {
    _zoomPanBehavior = ZoomPanBehavior(
      // Enables pinch zooming
        enableMouseWheelZooming : true,
        enablePinching: true,
    );
    _tooltipBehavior =  TooltipBehavior(enable: true);
    // TODO: implement initState
    super.initState();
  }
  @override

  Widget build(BuildContext context) {

    return SizedBox.expand(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              TextButton(onPressed: (){}, child: Text('dd')),
              TextButton(onPressed: (){
                setState(() {
                  chartData.add(ChartData(322,23));
                  _chartSeriesController?.updateDataSource(
                    addedDataIndexes: <int>[chartData.length - 1],
                    removedDataIndexes: <int>[0],
                  );
                });

              }, child: Text('dd'))
            ],
          ),
          SfCartesianChart(
            // Initialize category axis
              title: ChartTitle(text: '지난 집중 시간 기록'),
              zoomPanBehavior: _zoomPanBehavior,
              tooltipBehavior: _tooltipBehavior,
              primaryXAxis: CategoryAxis(),
              series: <ChartSeries>[
                // Initialize line series
                LineSeries<ChartData, num>(
                    name:'날짜',
                    enableTooltip: true,
                    dataSource: chartData,
                    xValueMapper: (ChartData days, _) => days.day,
                    yValueMapper: (ChartData days, _) => days.sales,
                    dataLabelSettings:DataLabelSettings(isVisible : true)
                )
              ]
          )
        ],
      )
    );
  }
}

class ChartData {
  ChartData(this.day, this.sales);
  final num day;
  final double? sales;
}

1페이지 코드

플러터 차트 만들기 일단은 성공..