fixed colors issue & updated README file

El-Mazouzi · Mar 15, 2023 · f82db50 · f82db50
1 parent 2f38688
commit f82db50
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 104 deletions.
diff --git 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
@@ -4,7 +4,7 @@
 
 <p align="center"><img src="https://raw.githubusercontent.com/El-Mazouzi/custom_date_range_picker/master/screenshot.jpg" width="320" height="650"/></p>
 
-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
@@ -85,6 +85,8 @@ class _MyHomePageState extends State<MyHomePage> {
             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
@@ -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
@@ -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<CustomCalendar> {
                   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<CustomCalendar> {
                     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<CustomCalendar> {
                   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<CustomCalendar> {
               style: TextStyle(
                   fontSize: 16,
                   fontWeight: FontWeight.w500,
-                  color: Theme.of(context).primaryColor),
+                  color: widget.primaryColor),
             ),
           ),
         ),
@@ -228,9 +240,7 @@ class CustomCalendarState extends State<CustomCalendar> {
                             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<CustomCalendar> {
                         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<CustomCalendar> {
                                   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<CustomCalendar> {
                                   DateTime.now().year == date.year
                               ? getIsInRange(date)
                                   ? Colors.white
-                                  : Theme.of(context).primaryColor
+                                  : widget.primaryColor
                               : Colors.transparent,
                           shape: BoxShape.circle),
                     ),