co2_stats_chart.dart

Go to the documentation of this file.

import '/core/ui/widgets/custom_card.dart';
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
class Co2StatisticsChart extends StatefulWidget {
  final List<Co2Data> data;
  final String timeFrame;
 
  const Co2StatisticsChart({
    super.key,
    required this.data,
    required this.timeFrame,
  });
 
  @override
  State<Co2StatisticsChart> createState() => _Co2StatisticsChartState();
}
 
class _Co2StatisticsChartState extends State<Co2StatisticsChart> {
  int? touchedIndex;
 
  @override
  Widget build(BuildContext context) {
    return CustomCard(
      padding: EdgeInsets.all(12.sp),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Co2 Statistics',
                style: Theme.of(context).textTheme.displaySmall?.copyWith(
                      fontWeight: FontWeight.bold,
                    ),
              ),
              Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                decoration: BoxDecoration(
                  color:
                      Theme.of(context).colorScheme.secondary.withOpacity(0.11),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Row(
                  children: [
                    Text(
                      widget.timeFrame,
                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
                            fontSize: 10.sp,
                          ),
                    ),
                    SizedBox(width: 3.sp),
                    Icon(
                      Icons.keyboard_arrow_down,
                      size: 13.sp,
                    ),
                  ],
                ),
              ),
            ],
          ),
          SizedBox(height: 20.sp),
          SizedBox(
            height: 200.sp,
            child: BarChart(
              BarChartData(
                barTouchData: BarTouchData(
                  touchTooltipData: BarTouchTooltipData(
                    getTooltipColor: (group) =>
                        Theme.of(context).colorScheme.secondary,
                    tooltipPadding: const EdgeInsets.all(8),
                    tooltipMargin: 8,
                    getTooltipItem: (group, groupIndex, rod, rodIndex) {
                      return BarTooltipItem(
                        '${widget.data[groupIndex].value.toStringAsFixed(0)} kg',
                        TextStyle(
                          color: Theme.of(context).colorScheme.onPrimary,
                        ),
                      );
                    },
                  ),
                  touchCallback: (FlTouchEvent event, barTouchResponse) {
                    setState(() {
                      if (event is! FlTapUpEvent &&
                          event is! FlPanEndEvent &&
                          event is! FlLongPressEnd) {
                        touchedIndex =
                            barTouchResponse?.spot?.touchedBarGroupIndex;
                      } else {
                        touchedIndex = -1;
                      }
                    });
                  },
                ),
                titlesData: FlTitlesData(
                  show: true,
                  rightTitles:
                      AxisTitles(sideTitles: SideTitles(showTitles: false)),
                  topTitles:
                      AxisTitles(sideTitles: SideTitles(showTitles: false)),
                  bottomTitles: AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: true,
                      getTitlesWidget: (value, meta) {
                        return Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Text(
                            widget.data[value.toInt()].month,
                            style:
                                Theme.of(context).textTheme.bodySmall?.copyWith(
                                      fontSize: 9.5.sp,
                                    ),
                          ),
                        );
                      },
                    ),
                  ),
                  leftTitles: const AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: false,
                    ),
                  ),
                ),
                borderData: FlBorderData(show: false),
                gridData: FlGridData(
                  show: true,
                  drawVerticalLine: false,
                  horizontalInterval: 5000,
                  getDrawingHorizontalLine: (value) {
                    return FlLine(
                      color: Theme.of(context).hintColor.withOpacity(0.2),
                      strokeWidth: 1,
                      dashArray: [5, 5],
                    );
                  },
                ),
                barGroups: widget.data.asMap().entries.map((entry) {
                  final index = entry.key;
                  final data = entry.value;
                  return BarChartGroupData(
                    x: index,
                    barRods: [
                      BarChartRodData(
                        toY: data.value,
                        color: touchedIndex == index
                            ? Theme.of(context).colorScheme.secondary
                            : Theme.of(context).colorScheme.primary,
                        width: 24,
                        borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(4),
                          topRight: Radius.circular(4),
                        ),
                      ),
                    ],
                  );
                }).toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
 
class Co2Data {
  final String month;
  final double value;
 
  Co2Data({required this.month, required this.value});
}