diff --git a/CHANGELOG.md b/CHANGELOG.md index 9704bac..cfe13b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,3 +25,15 @@ Updated the Readme.md file ## 1.0.7 Updated the flutter sdk to 3.7.6 + +## 1.0.8 + +Added primaryColor and backgroundColor + +## 1.0.9 + +updated package score + +## 1.0.10 + +Updated the Readme.md file, and added more documentation diff --git a/README.md b/README.md index 905b61f..6addb7f 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@

-To call the CustomDateRangePicker component, you need to pass the following props: +## Usage ```dart ... @@ -13,10 +13,12 @@ To call the CustomDateRangePicker component, you need to pass the following prop showCustomDateRangePicker( context, dismissible: true, - minimumDate: DateTime.now(), + minimumDate: DateTime.now().subtract(const Duration(days: 30)), maximumDate: DateTime.now().add(const Duration(days: 30)), endDate: endDate, startDate: startDate, + backgroundColor: Colors.white, + primaryColor: Colors.green, onApplyClick: (start, end) { setState(() { endDate = end; @@ -36,6 +38,30 @@ To call the CustomDateRangePicker component, you need to pass the following prop ), ``` +# Function: showCustomDateRangePicker + +This function displays a custom date range picker dialog box. + +## Parameters + +- `context` (required): The context in which to show the dialog. +- `dismissible` (required): A boolean value indicating whether the dialog can be dismissed by tapping outside of it. +- `minimumDate` (required): A `DateTime` object representing the minimum allowable date that can be selected in the date range picker. +- `maximumDate` (required): A `DateTime` object representing the maximum allowable date that can be selected in the date range picker. +- `startDate` (optional): A nullable `DateTime` object representing the initial start date of the date range selection. +- `endDate` (optional): A nullable `DateTime` object representing the initial end date of the date range selection. +- `onApplyClick` (required): A function that takes two `DateTime` parameters representing the selected start and end dates, respectively, and is called when the user taps the "Apply" button. +- `onCancelClick` (required): A function that is called when the user taps the "Cancel" button. +- `backgroundColor` (required): The background color of the dialog. +- `primaryColor` (required): The primary color of the dialog. +- `fontFamily` (optional): The font family to use for the text in the dialog. + +## Usage + +Inside the function, a `FocusNode` is requested to take focus away from any input field that might be in focus. A `showDialog` function is then called to show the `CustomDateRangePicker` dialog box. The `CustomDateRangePicker` widget is built with the parameters passed to `showCustomDateRangePicker`, and then passed as the `builder` parameter of the `showDialog` function. + +When the user interacts with the `CustomDateRangePicker` dialog box, the `onApplyClick` and `onCancelClick` functions are called accordingly. + Many Thanks to the creator of this Repo https://github.com/mitesh77/Best-Flutter-UI-Templates ## Getting Started diff --git a/example/lib/main.dart b/example/lib/main.dart index 8fbd4e8..6c24707 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -85,6 +85,8 @@ class _MyHomePageState extends State { maximumDate: DateTime.now().add(const Duration(days: 30)), endDate: endDate, startDate: startDate, + backgroundColor: Colors.white, + primaryColor: Colors.green, onApplyClick: (start, end) { setState(() { endDate = end; diff --git a/example/pubspec.lock b/example/pubspec.lock index 6d44b69..2adfbf1 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -55,7 +55,7 @@ packages: path: ".." relative: true source: path - version: "1.0.7" + version: "1.0.10" fake_async: dependency: transitive description: diff --git a/lib/custom_calendar.dart b/lib/custom_calendar.dart index 63ed7ed..a556d98 100644 --- a/lib/custom_calendar.dart +++ b/lib/custom_calendar.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; + +/// user for DateTime formatting import 'package:intl/intl.dart'; /// `const CustomCalendar({ @@ -8,16 +10,25 @@ import 'package:intl/intl.dart'; /// this.startEndDateChange, /// this.minimumDate, /// this.maximumDate, +/// required this.primaryColor, /// })` class CustomCalendar extends StatefulWidget { + /// The minimum date that can be selected on the calendar final DateTime? minimumDate; + /// The maximum date that can be selected on the calendar final DateTime? maximumDate; + /// The initial start date to be shown on the calendar final DateTime? initialStartDate; + /// The initial end date to be shown on the calendar final DateTime? initialEndDate; + /// The primary color to be used in the calendar's color scheme + final Color primaryColor; + + /// A function to be called when the selected date range changes final Function(DateTime, DateTime)? startEndDateChange; const CustomCalendar({ @@ -27,6 +38,7 @@ class CustomCalendar extends StatefulWidget { this.startEndDateChange, this.minimumDate, this.maximumDate, + required this.primaryColor, }) : super(key: key); @override @@ -95,7 +107,7 @@ class CustomCalendarState extends State { decoration: BoxDecoration( borderRadius: const BorderRadius.all(Radius.circular(24.0)), border: Border.all( - color: Theme.of(context).dividerColor, + color: Colors.grey.shade300, ), ), child: Material( @@ -125,7 +137,7 @@ class CustomCalendarState extends State { style: TextStyle( fontWeight: FontWeight.w500, fontSize: 20, - color: Theme.of(context).textTheme.displayLarge!.color, + color: Colors.grey.shade700, ), ), ), @@ -138,7 +150,7 @@ class CustomCalendarState extends State { decoration: BoxDecoration( borderRadius: const BorderRadius.all(Radius.circular(24.0)), border: Border.all( - color: Theme.of(context).dividerColor, + color: Colors.grey.shade300, ), ), child: Material( @@ -191,7 +203,7 @@ class CustomCalendarState extends State { style: TextStyle( fontSize: 16, fontWeight: FontWeight.w500, - color: Theme.of(context).primaryColor), + color: widget.primaryColor), ), ), ), @@ -228,9 +240,7 @@ class CustomCalendarState extends State { color: startDate != null && endDate != null ? getIsItStartAndEndDate(date) || getIsInRange(date) - ? Theme.of(context) - .primaryColor - .withOpacity(0.4) + ? widget.primaryColor.withOpacity(0.4) : Colors.transparent : Colors.transparent, borderRadius: BorderRadius.only( @@ -299,7 +309,7 @@ class CustomCalendarState extends State { child: Container( decoration: BoxDecoration( color: getIsItStartAndEndDate(date) - ? Theme.of(context).primaryColor + ? widget.primaryColor : Colors.transparent, borderRadius: const BorderRadius.all(Radius.circular(32.0)), @@ -325,7 +335,7 @@ class CustomCalendarState extends State { color: getIsItStartAndEndDate(date) ? Colors.white : currentMonthDate.month == date.month - ? Colors.black + ? widget.primaryColor : Colors.grey.withOpacity(0.6), fontSize: MediaQuery.of(context).size.width > 360 @@ -353,7 +363,7 @@ class CustomCalendarState extends State { DateTime.now().year == date.year ? getIsInRange(date) ? Colors.white - : Theme.of(context).primaryColor + : widget.primaryColor : Colors.transparent, shape: BoxShape.circle), ), diff --git a/lib/custom_date_range_picker.dart b/lib/custom_date_range_picker.dart index 31bbe4d..e51d2be 100644 --- a/lib/custom_date_range_picker.dart +++ b/lib/custom_date_range_picker.dart @@ -1,36 +1,56 @@ -import 'package:custom_date_range_picker/custom_calendar.dart'; +import 'custom_calendar.dart'; import 'package:flutter/material.dart'; + +/// user for DateTime formatting import 'package:intl/intl.dart'; -/// `CustomDateRangePicker({ +/// A custom date range picker widget that allows users to select a date range. +/// `const CustomDateRangePicker({ /// Key? key, /// this.initialStartDate, /// this.initialEndDate, +/// required this.primaryColor, +/// required this.backgroundColor, /// required this.onApplyClick, /// this.barrierDismissible = true, /// required this.minimumDate, /// required this.maximumDate, /// required this.onCancelClick, -/// }` +/// })` class CustomDateRangePicker extends StatefulWidget { + /// The minimum date that can be selected in the calendar. final DateTime minimumDate; + /// The maximum date that can be selected in the calendar. final DateTime maximumDate; + /// Whether the widget can be dismissed by tapping outside of it. final bool barrierDismissible; + /// The initial start date for the date range picker. If not provided, the calendar will default to the minimum date. final DateTime? initialStartDate; + /// The initial end date for the date range picker. If not provided, the calendar will default to the maximum date. final DateTime? initialEndDate; + /// The primary color used for the date range picker. + final Color primaryColor; + + /// The background color used for the date range picker. + final Color backgroundColor; + + /// A callback function that is called when the user applies the selected date range. final Function(DateTime, DateTime) onApplyClick; + /// A callback function that is called when the user cancels the selection of the date range. final Function() onCancelClick; const CustomDateRangePicker({ Key? key, this.initialStartDate, this.initialEndDate, + required this.primaryColor, + required this.backgroundColor, required this.onApplyClick, this.barrierDismissible = true, required this.minimumDate, @@ -86,7 +106,7 @@ class CustomDateRangePickerState extends State padding: const EdgeInsets.all(24.0), child: Container( decoration: BoxDecoration( - color: Colors.white, + color: widget.backgroundColor, borderRadius: const BorderRadius.all(Radius.circular(24.0)), boxShadow: [ BoxShadow( @@ -181,6 +201,7 @@ class CustomDateRangePickerState extends State maximumDate: widget.maximumDate, initialEndDate: widget.initialEndDate, initialStartDate: widget.initialStartDate, + primaryColor: widget.primaryColor, startEndDateChange: (DateTime startDateData, DateTime endDateData) { setState(() { @@ -197,49 +218,36 @@ class CustomDateRangePickerState extends State Expanded( child: Container( height: 48, - decoration: BoxDecoration( - borderRadius: const BorderRadius.all( - Radius.circular(24.0)), - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.6), - blurRadius: 8, - offset: const Offset(4, 4), - ), - ], + decoration: const BoxDecoration( + borderRadius: + BorderRadius.all(Radius.circular(24.0)), ), - child: Material( - color: Colors.transparent, - child: OutlinedButton( - style: ButtonStyle( - side: MaterialStateProperty.all( - BorderSide( - color: Theme.of(context) - .primaryColor)), - shape: MaterialStateProperty.all( - const RoundedRectangleBorder( - borderRadius: BorderRadius.all( - Radius.circular(24.0)), - ), + child: OutlinedButton( + style: ButtonStyle( + side: MaterialStateProperty.all( + BorderSide(color: widget.primaryColor)), + shape: MaterialStateProperty.all( + const RoundedRectangleBorder( + borderRadius: BorderRadius.all( + Radius.circular(24.0)), ), - backgroundColor: - MaterialStateProperty.all( - Theme.of(context).primaryColor), ), - onPressed: () { - try { - widget.onCancelClick(); - Navigator.pop(context); - } catch (_) {} - }, - child: const Center( - child: Text( - 'Cancel', - style: TextStyle( - fontWeight: FontWeight.w500, - fontSize: 18, - color: Colors.white, - ), + backgroundColor: MaterialStateProperty.all( + widget.primaryColor), + ), + onPressed: () { + try { + widget.onCancelClick(); + Navigator.pop(context); + } catch (_) {} + }, + child: const Center( + child: Text( + 'Cancel', + style: TextStyle( + fontWeight: FontWeight.w500, + fontSize: 18, + color: Colors.white, ), ), ), @@ -250,38 +258,36 @@ class CustomDateRangePickerState extends State Expanded( child: Container( height: 48, - decoration: BoxDecoration( - color: Theme.of(context).primaryColor, - borderRadius: const BorderRadius.all( - Radius.circular(24.0)), - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.6), - blurRadius: 8, - offset: const Offset(4, 4), - ), - ], + decoration: const BoxDecoration( + borderRadius: + BorderRadius.all(Radius.circular(24.0)), ), - child: Material( - color: Colors.transparent, - child: InkWell( - borderRadius: const BorderRadius.all( - Radius.circular(24.0)), - highlightColor: Colors.transparent, - onTap: () { - try { - widget.onApplyClick( - startDate!, endDate!); - Navigator.pop(context); - } catch (_) {} - }, - child: const Center( - child: Text( - 'Apply', - style: TextStyle( - fontWeight: FontWeight.w500, - fontSize: 18, - color: Colors.white), + child: OutlinedButton( + style: ButtonStyle( + side: MaterialStateProperty.all( + BorderSide(color: widget.primaryColor)), + shape: MaterialStateProperty.all( + const RoundedRectangleBorder( + borderRadius: BorderRadius.all( + Radius.circular(24.0)), + ), + ), + backgroundColor: MaterialStateProperty.all( + widget.primaryColor), + ), + onPressed: () { + try { + widget.onApplyClick(startDate!, endDate!); + Navigator.pop(context); + } catch (_) {} + }, + child: const Center( + child: Text( + 'Apply', + style: TextStyle( + fontWeight: FontWeight.w500, + fontSize: 18, + color: Colors.white, ), ), ), @@ -303,19 +309,19 @@ class CustomDateRangePickerState extends State } } -/// `showCustomDateRangePicker( -/// BuildContext context, { -/// required bool dismissible, -/// required DateTime minimumDate, -/// required DateTime maximumDate, -/// DateTime? startDate, -/// DateTime? endDate, -/// required Function(DateTime startDate, DateTime endDate) onApplyClick, -/// required Function() onCancelClick, -/// Color? backgroundColor, -/// Color? primaryColor, -/// String? fontFamily, -/// })` +/// Displays a custom date range picker dialog box. +/// `context` The context in which to show the dialog. +/// `dismissible` A boolean value indicating whether the dialog can be dismissed by tapping outside of it. +/// `minimumDate` A DateTime object representing the minimum allowable date that can be selected in the date range picker. +/// `maximumDate` A DateTime object representing the maximum allowable date that can be selected in the date range picker. +/// `startDate` A nullable DateTime object representing the initial start date of the date range selection. +/// `endDate` A nullable DateTime object representing the initial end date of the date range selection. +/// `onApplyClick` A function that takes two DateTime parameters representing the selected start and end dates, respectively, and is called when the user taps the "Apply" button. +/// `onCancelClick` A function that is called when the user taps the "Cancel" button. +/// `backgroundColor` The background color of the dialog. +/// `primaryColor` The primary color of the dialog. +/// `fontFamily` The font family to use for the text in the dialog. + void showCustomDateRangePicker( BuildContext context, { required bool dismissible, @@ -325,15 +331,20 @@ void showCustomDateRangePicker( DateTime? endDate, required Function(DateTime startDate, DateTime endDate) onApplyClick, required Function() onCancelClick, - Color? backgroundColor, - Color? primaryColor, + required Color backgroundColor, + required Color primaryColor, String? fontFamily, }) { + /// Request focus to take it away from any input field that might be in focus FocusScope.of(context).requestFocus(FocusNode()); + + /// Show the CustomDateRangePicker dialog box showDialog( context: context, builder: (BuildContext context) => CustomDateRangePicker( barrierDismissible: true, + backgroundColor: backgroundColor, + primaryColor: primaryColor, minimumDate: minimumDate, maximumDate: maximumDate, initialStartDate: startDate, diff --git a/pubspec.yaml b/pubspec.yaml index 530b203..bbc0f4e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: custom_date_range_picker description: A Flutter package for both android and iOS which provides a custom date range picker -version: 1.0.7 +version: 1.0.10 homepage: https://github.com/El-Mazouzi/custom_date_range_picker environment: