emission_breakdown_list.dart

Go to the documentation of this file.

import '/core/ui/widgets/custom_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hugeicons/hugeicons.dart';
 
class EmissionsBreakdownList extends StatelessWidget {
  const EmissionsBreakdownList({super.key});
 
  @override
  Widget build(BuildContext context) {
    return CustomCard(
      padding:
          EdgeInsets.only(left: 3.sp, right: 17.sp, top: 10.sp, bottom: 15.sp),
      child: EmissionsBreakdown(
        categories: [
          EmissionCategory(
            name: 'Energy',
            icon: HugeIcons.strokeRoundedEnergy,
            percentage: 0.40,
            backgroundColor: const Color(0xFFFFECEC),
            iconColor: const Color(0xFFFF6B6B),
            progressColor: const Color(0xFFFF6B6B),
            progressBackgroundColor: const Color(0xFFFFECEC),
          ),
          EmissionCategory(
            name: 'Food',
            icon: HugeIcons.strokeRoundedVegetarianFood,
            percentage: 0.38,
            backgroundColor: const Color(0xFFE8F5E9),
            iconColor: const Color(0xFF4CAF50),
            progressColor: const Color(0xFF4CAF50),
            progressBackgroundColor: const Color(0xFFE8F5E9),
          ),
          EmissionCategory(
            name: 'Waste',
            icon: HugeIcons.strokeRoundedWasteRestore,
            percentage: 0.19,
            backgroundColor: const Color(0xFFFFECE6),
            iconColor: const Color(0xFFFF8A65),
            progressColor: const Color(0xFFFF8A65),
            progressBackgroundColor: const Color(0xFFFFECE6),
          ),
          EmissionCategory(
            name: 'Transports',
            icon: HugeIcons.strokeRoundedContainerTruck,
            percentage: 0.05,
            backgroundColor: const Color(0xFFE3F2FD),
            iconColor: const Color(0xFF2196F3),
            progressColor: const Color(0xFF2196F3),
            progressBackgroundColor: const Color(0xFFE3F2FD),
          ),
          EmissionCategory(
            name: 'Water',
            icon: HugeIcons.strokeRoundedDroplet,
            percentage: 0.01,
            backgroundColor: const Color(0xFFE1F5FE),
            iconColor: const Color(0xFF03A9F4),
            progressColor: const Color(0xFF03A9F4),
            progressBackgroundColor: const Color(0xFFE1F5FE),
          ),
        ],
      ),
    );
  }
}
 
class EmissionsBreakdown extends StatelessWidget {
  final List<EmissionCategory> categories;
 
  const EmissionsBreakdown({
    super.key,
    required this.categories,
  });
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListView.separated(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          padding: EdgeInsets.zero,
          itemCount: categories.length,
          separatorBuilder: (context, index) => const SizedBox(height: 16),
          itemBuilder: (context, index) {
            final category = categories[index];
            return CategoryProgressItem(category: category);
          },
        ),
        SizedBox(height: 4.sp),
      ],
    );
  }
}
 
class CategoryProgressItem extends StatelessWidget {
  final EmissionCategory category;
 
  const CategoryProgressItem({
    super.key,
    required this.category,
  });
 
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 40.sp,
          height: 40.sp,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
          ),
          child: Icon(
            category.icon,
            color: category.iconColor,
          ),
        ),
        SizedBox(width: 7.sp),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    category.name,
                    style: Theme.of(context).textTheme.bodySmall,
                  ),
                  Text(
                    '${(category.percentage * 100).toInt()}%',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: Theme.of(context).hintColor,
                          fontSize: 10.sp,
                        ),
                  ),
                ],
              ),
              SizedBox(height: 12.sp),
              ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: LinearProgressIndicator(
                  value: category.percentage,
                  backgroundColor: category.progressBackgroundColor,
                  valueColor:
                      AlwaysStoppedAnimation<Color>(category.progressColor),
                  minHeight: 4,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}
 
class EmissionCategory {
  final String name;
  final IconData icon;
  final double percentage;
  final Color backgroundColor;
  final Color iconColor;
  final Color progressColor;
  final Color progressBackgroundColor;
 
  EmissionCategory({
    required this.name,
    required this.icon,
    required this.percentage,
    required this.backgroundColor,
    required this.iconColor,
    required this.progressColor,
    required this.progressBackgroundColor,
  });
}