internal/flutter_date_time_picker
5
0
Fork 0
mirror of https://github.com/Iconica-Development/flutter_date_time_picker.git synced 2025-05-18 18:33:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #26 from Iconica-Development/feature/datepicker_general_customizations

Browse source 
Add several different customization options, refactoring
This commit is contained in:
BV1BV1 2023-02-14 11:38:34 +01:00 committed by GitHub
commit 315c24729a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 100 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
CHANGELOG.md
View file

@ -1,7 +1,12 @@
## 3.0.0
- Added customization options for box encapsulating the datetimepicker (Customize shadow, add image or gradient)
- Removed ability to specify ShapeBorder directly in date_time_picker_theme. Specifying ShapeBorder now part of ShapeDecoration-customization.
- Removed ability to specify ShapeBorder directly in date_time_picker_theme. Specifying ShapeBorder now part of ShapeDecoration-customization
- Replaced 4 identical box-themes with different names with 1 general box-theme
- Renamed ambiguously named textStyle-property of DatePicker that only affected weekday-styling as weekdayTextStyle
- Added custimzation option to change border of days
- Added customization option to change padding of calendar
## 2.3.1
- Added extra customization options for datetimepicker (Customizable buttons, text formatting for weekday and month)

44
example/lib/main.dart
View file

@ -56,26 +56,30 @@ class DatePickerDemo extends StatelessWidget {
dateBoxShape: DateBoxShape.circle,
backgroundColor: Colors.white,
markedIndicatorColor: Colors.red,
baseTheme: const DateBoxBaseTheme(
Colors.white,
TextStyle(color: Colors.black),
baseTheme: const DateBoxTheme(
backgroundColor: Colors.white,
textStyle: TextStyle(color: Colors.black),
),
selectedTheme: const DateBoxSelectedTheme(
Color(0x4BF44336),
TextStyle(
selectedTheme: const DateBoxTheme(
backgroundColor: Colors.red,
textStyle: TextStyle(
color: Colors.black,
),
),
highlightTheme: const DateBoxHighlightTheme(
Colors.red,
TextStyle(
highlightTheme: DateBoxTheme(
borderStyle: Border.all(
color: Colors.black,
width: 3,
),
backgroundColor: Colors.red,
textStyle: const TextStyle(
color: Colors.white,
),
),
barTheme: const DateTimePickerBarTheme(
barColor: Colors.pinkAccent,
barColor: Colors.red,
barOpacity: 1,
textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
textStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
paginationSize: 25,
);
@ -156,19 +160,19 @@ class DatePickerDemo extends StatelessWidget {
dateTimePickerTheme: const DateTimePickerTheme(
backgroundColor: Colors.white,
markedIndicatorColor: Colors.red,
baseTheme: DateBoxBaseTheme(
Colors.white,
TextStyle(color: Colors.black),
baseTheme: DateBoxTheme(
backgroundColor: Colors.white,
textStyle: TextStyle(color: Colors.black),
),
selectedTheme: DateBoxSelectedTheme(
Color(0x4BF44336),
TextStyle(
selectedTheme: DateBoxTheme(
backgroundColor: Color(0x4BF44336),
textStyle: TextStyle(
color: Colors.red,
),
),
highlightTheme: DateBoxHighlightTheme(
Colors.red,
TextStyle(
highlightTheme: DateBoxTheme(
backgroundColor: Colors.red,
textStyle: TextStyle(
color: Colors.white,
),
),

5
lib/flutter_date_time_picker.dart
View file

@ -8,10 +8,7 @@ export 'src/drag_down_date_time_picker.dart' show DragDownDateTimePicker;
export 'src/overlay_date_time_picker.dart' show OverlayDateTimePicker;
export 'src/models/date_constraint.dart';
export 'src/enums/date_box_shape.dart';
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';
export 'src/models/date_time_picker_bar_theme.dart';
export 'src/widgets/date_time_picker/date_time_picker.dart';
export 'src/models/date_box_theme.dart';

19
lib/src/models/date_box_disabled_theme.dart
View file

@ -1,19 +0,0 @@
// SPDX-FileCopyrightText: 2022 Iconica
//
// SPDX-License-Identifier: BSD-3-Clause
import 'package:flutter/widgets.dart' show Color, TextStyle;
class DateBoxDisabledTheme {
/// Disabled date theme.
const DateBoxDisabledTheme(
this.backgroundColor,
this.textStyle,
);
/// Background color of selected date.
final Color? backgroundColor;
/// The style of the date number.
final TextStyle? textStyle;
}

19
lib/src/models/date_box_highlight_theme.dart
View file

@ -1,19 +0,0 @@
// SPDX-FileCopyrightText: 2022 Iconica
//
// SPDX-License-Identifier: BSD-3-Clause
import 'package:flutter/widgets.dart' show Color, TextStyle;
class DateBoxHighlightTheme {
/// Highlighted date theme.
const DateBoxHighlightTheme(
this.backgroundColor,
this.textStyle,
);
/// Background color of highlighted date.
final Color? backgroundColor;
/// The style of the date number.
final TextStyle? textStyle;
}

19
lib/src/models/date_box_selected_theme.dart
View file

@ -1,19 +0,0 @@
// SPDX-FileCopyrightText: 2022 Iconica
//
// SPDX-License-Identifier: BSD-3-Clause
import 'package:flutter/widgets.dart' show Color, TextStyle;
class DateBoxSelectedTheme {
/// Selected date theme.
const DateBoxSelectedTheme(
this.backgroundColor,
this.textStyle,
);
/// Background color of selected date.
final Color? backgroundColor;
/// The style of the date number.
final TextStyle? textStyle;
}

12
lib/src/models/date_box_base_theme.dart → lib/src/models/date_box_theme.dart
View file

@ -2,18 +2,22 @@
//
// SPDX-License-Identifier: BSD-3-Clause
import 'package:flutter/widgets.dart' show Color, TextStyle;
import 'package:flutter/widgets.dart' show Color, TextStyle, BoxBorder;
class DateBoxBaseTheme {
class DateBoxTheme {
/// Default date theme.
const DateBoxBaseTheme(
const DateBoxTheme({
this.backgroundColor,
this.textStyle,
);
this.borderStyle,
});
/// Background color of default date
final Color? backgroundColor;
/// The style of the date number.
final TextStyle? textStyle;
/// The style of the border
final BoxBorder? borderStyle;
}

37
lib/src/models/date_time_picker_theme.dart
View file

@ -23,24 +23,24 @@ class DateTimePickerTheme {
this.monthViewSize = 0.6,
this.weekMonthTriggerSize = 0.3,
this.shapeDecoration,
this.baseTheme = const DateBoxBaseTheme(
Colors.white,
TextStyle(color: Colors.black),
this.baseTheme = const DateBoxTheme(
backgroundColor: Colors.white,
textStyle: TextStyle(color: Colors.black)),
this.highlightTheme = const DateBoxTheme(
backgroundColor: Colors.blue,
textStyle: TextStyle(color: Colors.white),
),
this.highlightTheme = const DateBoxHighlightTheme(
Colors.blue,
TextStyle(color: Colors.white),
this.selectedTheme = const DateBoxTheme(
backgroundColor: Color(0xFFBBDEFB),
textStyle: TextStyle(color: Colors.blue),
),
this.selectedTheme = const DateBoxSelectedTheme(
Color(0xFFBBDEFB),
TextStyle(color: Colors.blue),
),
this.disabledTheme = const DateBoxDisabledTheme(
Colors.grey,
TextStyle(color: Colors.white),
this.disabledTheme = const DateBoxTheme(
backgroundColor: Colors.grey,
textStyle: TextStyle(color: Colors.white),
),
this.barTheme = const DateTimePickerBarTheme(),
this.monthWeekDayHeaders = false,
this.calenderPadding = const EdgeInsets.all(8.0),
});
/// enum to define a shape dor the date. use [DateBoxShape.circle].
@ -48,16 +48,16 @@ class DateTimePickerTheme {
final DateBoxShape dateBoxShape;
/// This theme is used to style a default look for the dates.
final DateBoxBaseTheme baseTheme;
final DateBoxTheme baseTheme;
/// This theme is used for when a specific date is highlighted.
final DateBoxHighlightTheme highlightTheme;
final DateBoxTheme highlightTheme;
/// This theme is used for when a specific date is slected by the user.
final DateBoxSelectedTheme selectedTheme;
final DateBoxTheme selectedTheme;
/// This theme is used for when a specific date is disabled.
final DateBoxDisabledTheme disabledTheme;
final DateBoxTheme disabledTheme;
/// This theme is used for the bar of the date picker.
final DateTimePickerBarTheme barTheme;
@ -103,4 +103,7 @@ class DateTimePickerTheme {
final WidgetBuilder? nextIcon;
final WidgetBuilder? prevIcon;
/// The padding surrounding the calendar
final EdgeInsetsGeometry calenderPadding;
}

2
lib/src/overlay_date_time_picker.dart
View file

@ -223,7 +223,7 @@ class _OverlayDateTimePickerState extends State<OverlayDateTimePicker> {
padding: const EdgeInsets.all(8.0),
child: OverlayDateTimeContent(
theme: widget.theme,
textStyle: widget.textStyle,
weekdayTextStyle: widget.textStyle,
size: widget.size,
controller: _dateTimePickerController,
showWeekDays: true,

8
lib/src/widgets/date_time_picker/date_time_picker.dart
View file

@ -11,7 +11,7 @@ class DateTimePicker extends StatefulWidget {
final DateTimePickerTheme theme;
/// Style to base the text on
final TextStyle textStyle;
final TextStyle weekdayTextStyle;
/// Callback that provides the date tapped on as a [DateTime] object.
final Function(DateTime date)? onTapDay;
@ -63,7 +63,7 @@ class DateTimePicker extends StatefulWidget {
{super.key,
this.child,
required this.theme,
this.textStyle = const TextStyle(),
this.weekdayTextStyle = const TextStyle(),
this.onTapDay,
this.highlightToday = true,
this.alwaysUse24HourFormat = true,
@ -138,10 +138,10 @@ class _DateTimePickerState extends State<DateTimePicker> {
width: widget.size.width,
height: widget.size.height,
child: Padding(
padding: const EdgeInsets.all(8.0),
padding: widget.theme.calenderPadding,
child: OverlayDateTimeContent(
theme: widget.theme,
textStyle: widget.textStyle,
weekdayTextStyle: widget.weekdayTextStyle,
size: widget.size,
controller: _dateTimePickerController,
showWeekDays: true,

17
lib/src/widgets/overlay_date_time_picker/date_picker.dart
View file

@ -14,7 +14,7 @@ class DatePicker extends StatelessWidget {
super.key,
required this.controller,
required this.theme,
required this.textStyle,
required this.weekdayTextStyle,
required this.onSelectDate,
required this.date,
required this.showWeekDays,
@ -23,7 +23,7 @@ class DatePicker extends StatelessWidget {
final DateTimePickerController controller;
final DateTimePickerTheme theme;
final TextStyle textStyle;
final TextStyle weekdayTextStyle;
final void Function(DateTime date) onSelectDate;
final DateTime date;
final bool showWeekDays;
@ -64,11 +64,14 @@ class DatePicker extends StatelessWidget {
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Text(
// The first day in November 2022 is monday
// We use it to properly show monday as the first day and sunday as the last one
date,
style: textStyle.copyWith(fontWeight: FontWeight.bold),
),
// The first day in November 2022 is monday
// We use it to properly show monday as the first day and sunday as the last one
date,
style: weekdayTextStyle
// .copyWith(
// fontStyle: FontStyle.italic,
// fontWeight: FontWeight.w200),
),
),
),
);

10
lib/src/widgets/overlay_date_time_picker/overlay.dart
View file

@ -14,7 +14,7 @@ class OverlayDateTimeContent extends StatefulWidget {
const OverlayDateTimeContent({
super.key,
required this.theme,
required this.textStyle,
required this.weekdayTextStyle,
required this.size,
required this.controller,
required this.showWeekDays,
@ -26,7 +26,7 @@ class OverlayDateTimeContent extends StatefulWidget {
});
final DateTimePickerTheme theme;
final TextStyle textStyle;
final TextStyle weekdayTextStyle;
final Size size;
final DateTimePickerController controller;
final bool showWeekDays;
@ -151,7 +151,7 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
controller: widget.controller,
onSelectDate: _onSelectDate,
theme: widget.theme,
textStyle: widget.textStyle,
weekdayTextStyle: widget.weekdayTextStyle,
date: previousDate,
dateTimeConstraint: widget.dateTimeConstraint,
showWeekDays: widget.showWeekDays,
@ -160,7 +160,7 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
controller: widget.controller,
onSelectDate: _onSelectDate,
theme: widget.theme,
textStyle: widget.textStyle,
weekdayTextStyle: widget.weekdayTextStyle,
date: widget.controller.browsingDate,
showWeekDays: widget.showWeekDays,
dateTimeConstraint: widget.dateTimeConstraint,
@ -169,7 +169,7 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
controller: widget.controller,
onSelectDate: _onSelectDate,
theme: widget.theme,
textStyle: widget.textStyle,
weekdayTextStyle: widget.weekdayTextStyle,
date: nextDate,
dateTimeConstraint: widget.dateTimeConstraint,
showWeekDays: widget.showWeekDays,

24
lib/src/widgets/overlay_date_time_picker/pickable_date.dart
View file

@ -40,11 +40,15 @@ class PickableDate extends StatelessWidget {
children: [
Container(
decoration: BoxDecoration(
border: getBorder(
isToday,
isSelected,
),
color: getColor(
isToday,
isSelected,
),
borderRadius: getBorder(theme.dateBoxShape),
borderRadius: getBorderRadius(theme.dateBoxShape),
),
child: Center(
child: Opacity(
@ -71,7 +75,7 @@ class PickableDate extends StatelessWidget {
);
}
BorderRadiusGeometry? getBorder(DateBoxShape shape) {
BorderRadiusGeometry? getBorderRadius(DateBoxShape shape) {
switch (shape) {
case DateBoxShape.circle:
return BorderRadius.all(Radius.circular(theme.monthDateBoxSize));
@ -83,8 +87,8 @@ class PickableDate extends StatelessWidget {
}
Color? getColor(bool isToday, bool isSelected) {
if (isToday) return theme.highlightTheme.backgroundColor;
if (isSelected) return theme.selectedTheme.backgroundColor;
if (isToday) return theme.highlightTheme.backgroundColor;
return null;
}
@ -93,4 +97,18 @@ class PickableDate extends StatelessWidget {
if (isSelected) return theme.selectedTheme.textStyle;
return theme.baseTheme.textStyle;
}
BoxBorder getBorder(bool isToday, bool isSelected) {
if (isToday) {
if (theme.highlightTheme.borderStyle != null) {
return theme.highlightTheme.borderStyle!;
}
}
if (isSelected) {
if (theme.selectedTheme.borderStyle != null) {
return theme.selectedTheme.borderStyle!;
}
}
return Border.all(color: const Color.fromARGB(0, 255, 255, 255));
}
}