Merge pull request #2 from Iconica-Development/feature/date-picker-theming

more theming options

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.0.2
+
+* Added option to change background color of date picker.
+* Added option to style the bar at the bottom of the date picker.
+
 ## 0.0.1
 
 * TODO: Describe initial release.

example/lib/main.dart

@@ -36,7 +36,12 @@ class DatePickerDemo extends StatelessWidget {
   Widget build(BuildContext context) {
     return DateTimePicker(
       dateTimePickerTheme: const DateTimePickerTheme(
+        backgroundColor: Colors.white,
         markedIndicatorColor: Colors.red,
+        baseTheme: DateBoxBaseTheme(
+          Colors.white,
+          TextStyle(color: Colors.black),
+        ),
         selectedTheme: DateBoxSelectedTheme(
           Color(0x4BF44336),
           TextStyle(
@@ -48,7 +53,12 @@ class DatePickerDemo extends StatelessWidget {
           TextStyle(
             color: Colors.white,
           ),
-          )),
+        ),
+        barTheme: DateTimePickerBarTheme(
+          barColor: Colors.black,
+          barOpacity: 1,
+        ),
+      ),
       markedDates: [DateTime(2022, 9, 6)],
     );
   }

lib/flutter_date_time_picker.dart

@@ -11,3 +11,4 @@ export 'src/models/date_box_disabled_theme.dart';
 export 'src/models/date_box_highlight_theme.dart';
 export 'src/models/date_box_selected_theme.dart';
 export 'src/models/date_time_picker_theme.dart';
+export 'src/models/date_time_picker_bar_theme.dart';

lib/src/date_time_picker.dart

@@ -238,7 +238,8 @@ class _DateTimePickerState extends State<DateTimePicker> {
                         padding: const EdgeInsets.only(bottom: 12.5),
                         child: Container(
                           decoration: BoxDecoration(
-                            color: Colors.white,
+                            color:
+                                _dateTimePickerController.theme.backgroundColor,
                             borderRadius: const BorderRadius.only(
                               bottomLeft: Radius.circular(20),
                               bottomRight: Radius.circular(20),

lib/src/models/date_time_picker_bar_theme.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+class DateTimePickerBarTheme {
+  /// The [DateTimePickerBarTheme] to style bar of the [DateTimePicker] in.
+  /// Define a custom size for the bar and it's color/opacity.
+  const DateTimePickerBarTheme({
+    this.barColor = Colors.grey,
+    this.barOpacity = 0.3,
+    this.barWidth = 50,
+    this.barHeight = 3,
+  });
+
+  /// The color used for the bar shown at the bottom of the date picker.
+  final Color barColor;
+
+  /// The opacity of the color used for the bar that's shown at the bottom of the date picker.
+  final double barOpacity;
+
+  /// The height of the bar shown at the bottom of the date picker.
+  final double barHeight;
+
+  /// The width of the bar shown at the bottom of the date picker.
+  final double barWidth;
+}

lib/src/models/date_time_picker_theme.dart

@@ -4,6 +4,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:flutter_date_time_picker/flutter_date_time_picker.dart';
+import 'package:flutter_date_time_picker/src/models/date_time_picker_bar_theme.dart';
 
 class DateTimePickerTheme {
   /// The [DateTimePickerTheme] to style [DateTimePicker] in. Define a custom shape for the dates and specifically style
@@ -13,6 +14,7 @@ class DateTimePickerTheme {
     this.monthDateBoxSize = 45,
     this.markedIndicatorColor,
     this.dateBoxShape = DateBoxShape.roundedRectangle,
+    this.backgroundColor = Colors.white,
     this.baseTheme = const DateBoxBaseTheme(
       Colors.white,
       TextStyle(color: Colors.black),
@@ -29,6 +31,7 @@ class DateTimePickerTheme {
       Colors.grey,
       TextStyle(color: Colors.white),
     ),
+    this.barTheme = const DateTimePickerBarTheme(),
   });
 
   /// enum to define a shape dor the date. use [DateBoxShape.circle].
@@ -47,6 +50,9 @@ class DateTimePickerTheme {
   /// This theme is used for when a specific date is disabled.
   final DateBoxDisabledTheme disabledTheme;
 
+  /// This theme is used for the bar of the date picker.
+  final DateTimePickerBarTheme barTheme;
+
   /// Size of date box in a week view.
   final double weekDateBoxSize;
 
@@ -55,4 +61,7 @@ class DateTimePickerTheme {
 
   /// The color used for a indicator for a marked date.
   final Color? markedIndicatorColor;
+
+  /// The color used for a background of the date picker.
+  final Color backgroundColor;
 }

lib/src/widgets/month_date_time_picker/month_date_time_picker_sheet.dart

@@ -5,7 +5,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_date_time_picker/src/extensions/date_time.dart';
 import 'package:flutter_date_time_picker/src/utils/date_time_picker_controller.dart';
-import 'package:flutter_date_time_picker/src/widgets/month_date_time_picker.dart/month_date_time_picker.dart';
+import 'package:flutter_date_time_picker/src/widgets/month_date_time_picker/month_date_time_picker.dart';
 import 'package:intl/intl.dart';
 
 class MonthDateTimePickerSheet extends StatelessWidget {
@@ -20,6 +20,8 @@ class MonthDateTimePickerSheet extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    var theme = dateTimePickerController.theme;
+
     return Column(
       children: [
         if (dateTimePickerController.header != null)
@@ -34,7 +36,7 @@ class MonthDateTimePickerSheet extends StatelessWidget {
           DateFormat.yMMMM().format(
             dateTimePickerController.browsingDate,
           ),
-          style: dateTimePickerController.theme.baseTheme.textStyle!
+          style: theme.baseTheme.textStyle!
               .copyWith(fontSize: 25),
         ),
         SizedBox(
@@ -97,11 +99,13 @@ class MonthDateTimePickerSheet extends StatelessWidget {
           ),
         ),
         Container(
-          height: 3,
-          width: 50,
+          height: theme.barTheme.barHeight,
+          width: theme.barTheme.barWidth,
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(5),
-            color: Colors.grey.withOpacity(0.3),
+            color: theme.barTheme.barColor.withOpacity(
+              theme.barTheme.barOpacity,
+            ),
           ),
         ),
         const SizedBox(

lib/src/widgets/week_date_time_picker/week_date_time_picker_sheet.dart

@@ -36,6 +36,8 @@ class WeekDateTimePickerSheet extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    var theme = dateTimePickerController.theme;
+
     return Column(
       children: [
         if (dateTimePickerController.header != null)
@@ -49,8 +51,7 @@ class WeekDateTimePickerSheet extends StatelessWidget {
         if (showHeader) ...[
           Text(
             getDateHeader(),
-            style: dateTimePickerController.theme.baseTheme.textStyle!
-                .copyWith(fontSize: 9),
+            style: theme.baseTheme.textStyle!.copyWith(fontSize: 9),
           ),
           const SizedBox(
             height: 10,
@@ -103,11 +104,13 @@ class WeekDateTimePickerSheet extends StatelessWidget {
           height: 10,
         ),
         Container(
-          height: 3,
-          width: 50,
+          height: theme.barTheme.barHeight,
+          width: theme.barTheme.barWidth,
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(5),
-            color: Colors.grey.withOpacity(0.3),
+            color: theme.barTheme.barColor.withOpacity(
+              theme.barTheme.barOpacity,
+            ),
           ),
         ),
         const SizedBox(