Smart Date Time Range Picker #

A lightweight, customizable Flutter package for selecting date ranges, single time, and date-time ranges with built-in validation and minute-step control.

✨ Features #

• 📅 Date range picker (start & end)
• ⏰ Single time picker (returns formatted time like 04:56 AM)
• 📅⏰ Date & time range picker
• ⛔ Prevent past date & time selection
• ⏱ Minute step support (e.g. 0, 15, 30, 45)
• 📏 Maximum selectable date range limit
• 🎨 Theme customization
• 🧠 Controller-based architecture
• 📦 Example app included

📸 Screenshots #

Date Range	Time Picker	Date & Time Range

🚀 Installation #

Add this to your pubspec.yaml:

dependencies:
  smart_date_time_range: ^0.0.1

Then run:
flutter pub get

Example #

import 'package:flutter/material.dart';
import 'package:smart_date_time_range/smart_date_time_range.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String selectedStartDate = '';
  String selectedEndDate = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(title: const Text('Smart Date Time Range Picker'), backgroundColor: Colors.white,),
        body: ListView(
          children: [
            Padding(
              padding: const EdgeInsets.all(16),
              child: example1(),
            ),
          ],
        ),
      ),
    );
  }

  Widget example1(){
    return SmartDateTimeRangePicker(
      minDate: DateTime.now(),
      maxDate: DateTime.now().add(const Duration(days: 180)),
      maxRangeDays: 180,
      allowPastMonths: false,
      calendarLabel: [
        TextSpan(text: "Choose start & end date")
      ],
      startTimeLabel: [
        TextSpan(text: "Choose start time"),
        TextSpan(
          text: " (slected date - $selectedStartDate)",
          style: Theme.of(context).textTheme.titleSmall?.copyWith(
            fontWeight: FontWeight.bold
          ),
        ),
      ],
      endTimeLabel: [
        TextSpan(text: "Choose end time"),
        TextSpan(
          text: " (slected date - $selectedEndDate)",
          style: Theme.of(context).textTheme.titleSmall?.copyWith(
            fontWeight: FontWeight.bold
          ),
        ),
      ],
      theme: SmartDateTimeTheme(
        primaryColor: Colors.purple,
        rangeColor: Colors.purple.withValues(alpha:0.1),
        dayBorderRadius: BorderRadius.circular(50),
        todayColor: Colors.purple,
        timeSurfaceColor: Colors.purple.withValues(alpha:0.03)
      ),
      onChanged: (range) {
        debugPrint('Start: ${_formatDate(range.start)}');
        debugPrint('End: ${_formatDate(range.end)}');

        setState(() {
          selectedStartDate = _formatDate(range.start) ;
          selectedEndDate = _formatDate(range.end) ;
        });
      },
    );
  }

  Widget example2(){
    return SmartTimePicker(
      theme: SmartDateTimeTheme(
        primaryColor: Colors.pink,
        timeSurfaceColor: Colors.pink.withValues(alpha:0.1),
        timeContainerRadius: BorderRadius.circular(12) 
      ),
      onChanged: (time) {
        debugPrint('Time: ${_formatTime(time)}');
      },
    );
  }

  Widget example3(){
    return SmartDateRangePicker(
      minDate: DateTime.now(),
      maxDate: DateTime.now().add(const Duration(days: 20)),
      maxRangeDays: 20,
      allowPastMonths: false, 
      theme: SmartDateTimeTheme(
        primaryColor: Colors.green,
        rangeColor: Colors.green.withValues(alpha:0.1),
        dayBorderRadius: BorderRadius.circular(12),
        todayColor: Colors.green,
        timeSurfaceColor: Colors.green.withValues(alpha:0.03)
      ),
      onChanged: (range) {
        debugPrint('Start: ${_formatDate(range.start)}');
        debugPrint('End: ${_formatDate(range.end)}');
      },
    );
  }
}


String _formatTime(DateTime? date) { 
  if (date == null) return "--";

  final hour24 = date.hour;
  final minute = date.minute;

  final isAm = hour24 < 12;
  final hour12 = hour24 % 12 == 0 ? 12 : hour24 % 12;

  final h = hour12.toString().padLeft(2, '0');
  final m = minute.toString().padLeft(2, '0');
  final suffix = isAm ? 'AM' : 'PM';

  return "$h:$m $suffix";
} 

String _formatDate(DateTime? date) { 
  if (date == null) return "--"; return "${_monthName(date.month)} ${date.day}"; 
} 

String _monthName(int m) => const ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][m - 1];

Platform Support #

✅ Android

✅ iOS

✅ Web

✅ Desktop (Windows, macOS, Linux)

Contributing #

Pull requests and suggestions are welcome.