diff --git a/CHANGELOG.md b/CHANGELOG.md index 41cc7d8..3e47e76 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/example/lib/main.dart b/example/lib/main.dart index c5f58fa..244c2d0 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -36,19 +36,29 @@ class DatePickerDemo extends StatelessWidget { Widget build(BuildContext context) { return DateTimePicker( dateTimePickerTheme: const DateTimePickerTheme( - markedIndicatorColor: Colors.red, - selectedTheme: DateBoxSelectedTheme( - Color(0x4BF44336), - TextStyle( - color: Colors.red, - ), + backgroundColor: Colors.white, + markedIndicatorColor: Colors.red, + baseTheme: DateBoxBaseTheme( + Colors.white, + TextStyle(color: Colors.black), + ), + selectedTheme: DateBoxSelectedTheme( + Color(0x4BF44336), + TextStyle( + color: Colors.red, ), - highlightTheme: DateBoxHighlightTheme( - Colors.red, - TextStyle( - color: Colors.white, - ), - )), + ), + highlightTheme: DateBoxHighlightTheme( + Colors.red, + TextStyle( + color: Colors.white, + ), + ), + barTheme: DateTimePickerBarTheme( + barColor: Colors.black, + barOpacity: 1, + ), + ), markedDates: [DateTime(2022, 9, 6)], ); } diff --git a/lib/flutter_date_time_picker.dart b/lib/flutter_date_time_picker.dart index 32c71fc..b37e430 100644 --- a/lib/flutter_date_time_picker.dart +++ b/lib/flutter_date_time_picker.dart @@ -10,4 +10,5 @@ export 'src/models/date_box_base_theme.dart'; 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'; \ No newline at end of file +export 'src/models/date_time_picker_theme.dart'; +export 'src/models/date_time_picker_bar_theme.dart'; diff --git a/lib/src/date_time_picker.dart b/lib/src/date_time_picker.dart index 977987c..1f3657d 100644 --- a/lib/src/date_time_picker.dart +++ b/lib/src/date_time_picker.dart @@ -238,7 +238,8 @@ class _DateTimePickerState extends State { 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), diff --git a/lib/src/models/date_time_picker_bar_theme.dart b/lib/src/models/date_time_picker_bar_theme.dart new file mode 100644 index 0000000..076b625 --- /dev/null +++ b/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; +} diff --git a/lib/src/models/date_time_picker_theme.dart b/lib/src/models/date_time_picker_theme.dart index 90417d0..4c4ebe2 100644 --- a/lib/src/models/date_time_picker_theme.dart +++ b/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; } diff --git a/lib/src/widgets/month_date_time_picker/month_date_time_picker_sheet.dart b/lib/src/widgets/month_date_time_picker/month_date_time_picker_sheet.dart index 07f3734..56ebc49 100644 --- a/lib/src/widgets/month_date_time_picker/month_date_time_picker_sheet.dart +++ b/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( diff --git a/lib/src/widgets/week_date_time_picker/week_date_time_picker_sheet.dart b/lib/src/widgets/week_date_time_picker/week_date_time_picker_sheet.dart index 8593da4..44c1b95 100644 --- a/lib/src/widgets/week_date_time_picker/week_date_time_picker_sheet.dart +++ b/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(