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 #23 from Iconica-Development/feature/datepicker_customizations

Browse source 
Add extra customization options for datepicker component
This commit is contained in:
BV1BV1 2023-02-09 15:13:14 +01:00 committed by GitHub
commit 6602a0192c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 59 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -1,3 +1,7 @@
## 2.3.1
- Added extra customization options for datetimepicker (Customizable buttons, text formatting for weekday and month)
## 2.3.0
- Added availability of datetimepicker without button

31
example/lib/main.dart
View file

@ -44,32 +44,37 @@ class DatePickerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// set locale to Dutch
const dateTimePickerTheme = DateTimePickerTheme(
dateBoxShape: DateBoxShape.roundedRectangle,
DateTimePickerTheme dateTimePickerTheme = DateTimePickerTheme(
dateFormatWeekday: (value) =>
value[0].toUpperCase() + value.substring(1).toLowerCase(),
dateFormatMonth: (value) => value.toUpperCase(),
prevIcon: (context) => const Icon(Icons.chevron_left_sharp),
nextIcon: (context) => const Icon(Icons.chevron_right_sharp),
dateBoxShape: DateBoxShape.circle,
backgroundColor: Colors.white,
markedIndicatorColor: Colors.red,
baseTheme: DateBoxBaseTheme(
baseTheme: const DateBoxBaseTheme(
Colors.white,
TextStyle(color: Colors.black),
),
selectedTheme: DateBoxSelectedTheme(
selectedTheme: const DateBoxSelectedTheme(
Color(0x4BF44336),
TextStyle(
color: Colors.red,
color: Colors.black,
),
),
highlightTheme: DateBoxHighlightTheme(
highlightTheme: const DateBoxHighlightTheme(
Colors.red,
TextStyle(
color: Colors.white,
),
),
barTheme: DateTimePickerBarTheme(
barColor: Colors.black,
barOpacity: 1,
),
paginationSize: 50,
shapeBorder: ArrowedBorder(),
barTheme: const DateTimePickerBarTheme(
barColor: Colors.pinkAccent,
barOpacity: 1,
textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
paginationSize: 25,
shapeBorder: const ArrowedBorder(),
);
return Scaffold(
@ -139,7 +144,7 @@ class DatePickerDemo extends StatelessWidget {
return IconButton(
onPressed: onPressed, icon: const Icon(Icons.minimize));
},
)
),
],
),
),

2
example/pubspec.lock
View file

@ -68,7 +68,7 @@ packages:
path: ".."
relative: true
source: path
version: "2.2.3"
version: "2.3.1"
flutter_lints:
dependency: "direct dev"
description:

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

@ -9,6 +9,10 @@ class DateTimePickerTheme {
/// The [DateTimePickerTheme] to style [DragDownDateTimePicker] in. Define a custom shape for the dates and specifically style
/// a basic, highlighted, selected and disabled date.
const DateTimePickerTheme({
this.prevIcon,
this.nextIcon,
this.dateFormatMonth,
this.dateFormatWeekday,
this.paginationSize = 25,
this.weekDateBoxSize = 35,
this.monthDateBoxSize = 45,
@ -87,4 +91,14 @@ class DateTimePickerTheme {
/// If true the first letters of the weekdays will be displayed above the days of the month
final bool monthWeekDayHeaders;
/// This function allows you to change formatting of the month-text
final String Function(String date)? dateFormatMonth;
/// This function allows you to change formatting of weekday-text
final String Function(String date)? dateFormatWeekday;
final WidgetBuilder? nextIcon;
final WidgetBuilder? prevIcon;
}

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

@ -54,6 +54,11 @@ class DatePicker extends StatelessWidget {
child: Row(
children: List.generate(DateTime.daysPerWeek, (index) {
DateFormat dateFormatter = DateFormat("EE");
var date = dateFormatter.format(DateTime(2022, 11, index));
if (theme.dateFormatWeekday != null) {
date = theme.dateFormatWeekday!
.call(dateFormatter.format(DateTime(2022, 11, index)));
}
return Expanded(
child: Center(
child: Padding(
@ -61,7 +66,7 @@ class DatePicker extends StatelessWidget {
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
dateFormatter.format(DateTime(2022, 11, index)),
date,
style: textStyle.copyWith(fontWeight: FontWeight.bold),
),
),

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

@ -71,6 +71,18 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
@override
Widget build(BuildContext context) {
var monthText = DateFormat.yMMMM().format(
widget.controller.browsingDate,
);
if (widget.theme.dateFormatMonth != null) {
monthText = widget.theme.dateFormatMonth!.call(monthText);
}
Widget nextIcon = widget.theme.nextIcon?.call(context) ??
const Icon(Icons.arrow_circle_right_outlined);
Widget prevIcon = widget.theme.prevIcon?.call(context) ??
const Icon(Icons.arrow_circle_left_outlined);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
@ -88,14 +100,12 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
(widget.dateTimeConstraint.inMonthRange(previousDate))
? _goToPreviousPage
: null,
icon: const Icon(Icons.arrow_circle_left_outlined),
icon: prevIcon,
color: widget.theme.barTheme.barColor,
iconSize: widget.theme.paginationSize,
),
Text(
DateFormat.yMMMM().format(
widget.controller.browsingDate,
),
monthText,
style: widget.theme.barTheme.textStyle,
),
(widget.onNextPageButtonChild != null)
@ -109,7 +119,7 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
(widget.dateTimeConstraint.inMonthRange(nextDate))
? _goToNextPage
: null,
icon: const Icon(Icons.arrow_circle_right_outlined),
icon: nextIcon,
color: widget.theme.barTheme.barColor,
iconSize: widget.theme.paginationSize,
),

2
pubspec.yaml
View file

@ -1,6 +1,6 @@
name: flutter_date_time_picker
description: A Flutter package for date and time picker.
version: 2.3.0
version: 2.3.1
homepage: https://iconica.nl/
environment: