time_selector.dart

Go to the documentation of this file.

import 'dart:developer';
 
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
 
import '../../../../../core/ui/theme/color_palette.dart';
 
class TimeSelector extends StatefulWidget {
  final Function(String) onTimeRangeChanged;
  const TimeSelector({
    super.key,
    required this.onTimeRangeChanged,
  });
 
  @override
  State<TimeSelector> createState() => _TimeSelectorState();
}
 
class _TimeSelectorState extends State<TimeSelector> {
 
  TimeRange _selectedTimeRange = TimeRange.week;
  DateTime _startDate = DateTime.now().subtract(Duration(days: DateTime.now().weekday - 1));
  DateTime _endDate = DateTime.now();
 
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: ColorPalette.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: ColorPalette.black.withValues(alpha: 0.05),
            blurRadius: 20,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: GestureDetector(
                  onTap: () => _updateTimeRange(TimeRange.week),
                  child: _buildTab(
                    "common.this_week".tr(),
                    _selectedTimeRange == TimeRange.week,
                  ),
                ),
              ),
              Expanded(
                child: GestureDetector(
                  onTap: () => _updateTimeRange(TimeRange.month),
                  child: _buildTab(
                    "common.this_month".tr(),
                    _selectedTimeRange == TimeRange.month,
                  ),
                ),
              ),
              Expanded(
                child: GestureDetector(
                  onTap: () async {
                    await _showDateRangePicker(context);
                    _updateTimeRange(TimeRange.custom);
                  },
                  child: _buildTab(
                    "dashboard.custom".tr(),
                    _selectedTimeRange == TimeRange.custom,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                _buildDateChip("From", _formatDate(_startDate)),
                const SizedBox(width: 16),
                Container(
                  width: 20,
                  height: 2,
                  color: ColorPalette.grey.withValues(alpha: 0.3),
                ),
                const SizedBox(width: 16),
                _buildDateChip("To", _formatDate(_endDate)),
              ],
            ),
          ),
        ],
      ),
    );
  }
 
  String _formatDate(DateTime date) {
    return DateFormat('dd MMM').format(date);
  }
 
    Widget _buildTab(String text, bool isSelected) {
    return Container(
      margin: const EdgeInsets.all(4),
      padding: const EdgeInsets.symmetric(vertical: 12),
      decoration: BoxDecoration(
        color: isSelected ? ColorPalette.lightGreen : Colors.transparent,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Text(
        text,
        textAlign: TextAlign.center,
        style: TextStyle(
          color: isSelected ? ColorPalette.white : ColorPalette.grey,
          fontWeight: isSelected ? FontWeight.bold : FontWeight.w500,
          fontSize: 14,
        ),
      ),
    );
  }
 
  Widget _buildDateChip(String label, String date) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        color: ColorPalette.antiFlashWhite,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            label,
            style: const TextStyle(
              color: ColorPalette.grey,
              fontSize: 14,
            ),
          ),
          const SizedBox(width: 8),
          Text(
            date,
            style: const TextStyle(
              color: ColorPalette.darkGrey,
              fontWeight: FontWeight.bold,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }
 
  Future<void> _showDateRangePicker(BuildContext context) async {
 
    final DateTimeRange? pickedDateRange = await showDateRangePicker(
      lastDate: DateTime.now(),
      context: context,
      firstDate: DateTime(2025),
      builder: (context, child) {
        return Theme(
          data: Theme.of(context).copyWith(
            colorScheme: const ColorScheme.light(
              primary: ColorPalette.lightGreen,
              onPrimary: ColorPalette.white,
              surface: ColorPalette.white,
              onSurface: ColorPalette.darkGrey,
            ),
          ),
          child: child!,
        );
      },
    );
 
    if (pickedDateRange != null) {
      setState(() {
        _startDate = pickedDateRange.start;
        _endDate = pickedDateRange.end;
      });
      _fetchDataForTimeRange(_startDate, _endDate);
    }
  }
 
  void _updateTimeRange(TimeRange range) {
    setState(() {
      _selectedTimeRange = range;
      switch (range) {
        case TimeRange.week:
          _startDate = DateTime.now().subtract(Duration(days: DateTime.now().weekday - 1));
          _endDate = DateTime.now();
          widget.onTimeRangeChanged('week');
          break;
        case TimeRange.month:
          _startDate = DateTime(DateTime.now().year, DateTime.now().month, 1);
          _endDate = DateTime.now();
          widget.onTimeRangeChanged('month');
          break;
        case TimeRange.custom:
          // Custom range is handled by date picker
          break;
      }
    });
    _fetchDataForTimeRange(_startDate, _endDate);
  }
 
  void _fetchDataForTimeRange(DateTime start, DateTime end) {
    // Implement your data fetching logic here
    // This could involve calling an API, updating state, etc.
    log('Fetching data from ${DateFormat('dd MMM yyyy').format(start)} to ${DateFormat('dd MMM yyyy').format(end)}');
  }
} 
 
enum TimeRange {
  week,
  month,
  custom,
}