emission_tracker_widget.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 EmissionsTracker extends StatelessWidget {
  final int points;
  final double emissions;
  final List<FlSpot> chartData;
  final int selectedCategoryIndex;
  final Function(int) onCategorySelected;
 
  const EmissionsTracker({
    super.key,
    required this.points,
    required this.emissions,
    required this.chartData,
    required this.selectedCategoryIndex,
    required this.onCategorySelected,
  });
 
  @override
  Widget build(BuildContext context) {
    return CustomCard(
      padding: EdgeInsets.all(15.sp),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '+$points',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          fontWeight: FontWeight.bold,
                        ),
                  ),
                  Text(
                    'Points',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: Theme.of(context).hintColor,
                        ),
                  ),
                ],
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    '${emissions.toStringAsFixed(0)} kg',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          fontWeight: FontWeight.bold,
                        ),
                  ),
                  Text(
                    'Emissions',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: Theme.of(context).hintColor,
                        ),
                  ),
                ],
              ),
            ],
          ),
 
          const SizedBox(height: 30),
 
          // Chart
          SizedBox(
            height: 100,
            child: LineChart(
              LineChartData(
                gridData: const FlGridData(show: true),
                titlesData: FlTitlesData(
                  bottomTitles: AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: true,
                      getTitlesWidget: (value, meta) {
                        const months = [
                          'JAN',
                          'FEB',
                          'MAR',
                          'APR',
                          'JUN',
                          'JUL',
                          'AUG',
                          'SEP'
                        ];
                        if (value.toInt() >= 0 &&
                            value.toInt() < months.length) {
                          return Padding(
                            padding: EdgeInsets.only(top: 5.sp),
                            child: Text(
                              months[value.toInt()],
                              style: Theme.of(context)
                                  .textTheme
                                  .bodySmall
                                  ?.copyWith(
                                    fontSize: 9.sp,
                                    color: Theme.of(context).hintColor,
                                  ),
                            ),
                          );
                        }
                        return const Text('');
                      },
                    ),
                  ),
                  leftTitles: const AxisTitles(
                      sideTitles: SideTitles(showTitles: false)),
                  topTitles: const AxisTitles(
                      sideTitles: SideTitles(showTitles: false)),
                  rightTitles: const AxisTitles(
                      sideTitles: SideTitles(showTitles: false)),
                ),
                borderData: FlBorderData(show: false),
                lineBarsData: [
                  LineChartBarData(
                    spots: chartData,
                    isCurved: true,
                    color: Theme.of(context).colorScheme.primary,
                    barWidth: 2,
                    dotData: const FlDotData(show: false),
                    belowBarData: BarAreaData(
                      show: false,
                    ),
                  ),
                ],
              ),
            ),
          ),
 
          SizedBox(height: 20.sp),
 
          // Category Icons
          SizedBox(
            height: 60.sp,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _CategoryButton(
                  icon: Icons.bolt,
                  label: 'Energy',
                  isSelected: selectedCategoryIndex == 0,
                  onTap: () => onCategorySelected(0),
                ),
                _CategoryButton(
                  icon: Icons.restaurant,
                  label: 'Food',
                  isSelected: selectedCategoryIndex == 1,
                  onTap: () => onCategorySelected(1),
                ),
                _CategoryButton(
                  icon: Icons.delete_outline,
                  label: 'Waste',
                  isSelected: selectedCategoryIndex == 2,
                  onTap: () => onCategorySelected(2),
                ),
                _CategoryButton(
                  icon: Icons.directions_bus,
                  label: 'Transport',
                  isSelected: selectedCategoryIndex == 3,
                  onTap: () => onCategorySelected(3),
                ),
                _CategoryButton(
                  icon: Icons.water_drop,
                  label: 'Water',
                  isSelected: selectedCategoryIndex == 4,
                  onTap: () => onCategorySelected(4),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
 
class _CategoryButton extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool isSelected;
  final VoidCallback onTap;
 
  const _CategoryButton({
    Key? key,
    required this.icon,
    required this.label,
    required this.isSelected,
    required this.onTap,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 60.sp,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          padding: EdgeInsets.zero,
          backgroundColor: isSelected
              ? Theme.of(context).colorScheme.secondary
              : Colors.transparent,
        ),
        onPressed: onTap,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              color: isSelected
                  ? Theme.of(context).colorScheme.onPrimary
                  : Theme.of(context)
                      .textTheme
                      .bodySmall
                      ?.color
                      ?.withOpacity(0.3),
            ),
            SizedBox(height: 4.sp),
            Text(label,
                style: Theme.of(context).textTheme.bodySmall?.copyWith(
                      fontSize: 10.sp,
                      color: isSelected
                          ? Theme.of(context).colorScheme.onPrimary
                          : Theme.of(context)
                              .textTheme
                              .bodySmall
                              ?.color
                              ?.withOpacity(0.9),
                    )),
          ],
        ),
      ),
    );
  }
}