added marking to datetimepicker

This commit is contained in:
Jorian van der Kolk 2022-12-09 11:52:22 +01:00
parent ad430d6bf1
commit 700ad49eb4
9 changed files with 89 additions and 50 deletions

View file

@ -1,3 +1,6 @@
## 2.2.1
- Added marking to datetimepicker
## 2.2.0
- Added the abilty to add the weekday letters above the months

View file

@ -84,12 +84,14 @@ class DatePickerDemo extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
OverlayDateTimePicker(
markedDates: [DateTime.now().add(const Duration(days: 1))],
theme: dateTimePickerTheme,
alignment: Alignment.bottomCenter,
child: const Text("Select Day"),
onTapDay: (date) {},
),
OverlayDateTimePicker(
markedDates: [DateTime.now().add(const Duration(days: 3))],
theme: dateTimePickerTheme,
alignment: Alignment.center,
buttonBuilder: (key, onPressed) => TextButton(
@ -160,7 +162,7 @@ class DatePickerDemo extends StatelessWidget {
barOpacity: 1,
),
),
markedDates: [DateTime(2022, 9, 6)],
markedDates: [DateTime.now().subtract(const Duration(days: 1))],
),
],
),

View file

@ -61,7 +61,7 @@ packages:
path: ".."
relative: true
source: path
version: "2.1.0"
version: "2.2.0"
flutter_lints:
dependency: "direct dev"
description:

View file

@ -0,0 +1,31 @@
import 'package:flutter/material.dart';
class MarkedIcon extends StatelessWidget {
const MarkedIcon({
super.key,
this.color,
required this.width,
required this.height,
});
final double width;
final double height;
final Color? color;
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topRight,
child: IgnorePointer(
child: Container(
width: width,
height: height,
decoration: BoxDecoration(
color: color ?? Theme.of(context).indicatorColor,
borderRadius: BorderRadius.circular((width) * 2),
),
),
),
);
}
}

View file

@ -9,6 +9,7 @@ import 'package:flutter_date_time_picker/src/extensions/time_of_day.dart';
import 'package:flutter_date_time_picker/src/models/date_box_current_theme.dart';
import 'package:flutter_date_time_picker/src/models/date_time_picker_theme.dart';
import 'package:flutter_date_time_picker/src/utils/date_time_picker_controller.dart';
import 'package:flutter_date_time_picker/src/widgets/marked_icon.dart';
import 'package:intl/intl.dart';
class MonthDateTimePicker extends StatelessWidget {
@ -150,21 +151,11 @@ class MonthDateTimePicker extends StatelessWidget {
addedIndex,
daysToSkip,
)) ...[
Align(
alignment: Alignment.bottomRight,
child: IgnorePointer(
child: Container(
MarkedIcon(
width: monthDateBoxSize / 4,
height: monthDateBoxSize / 4,
decoration: BoxDecoration(
color: dateTimePickerController
.theme.markedIndicatorColor ??
Theme.of(context).indicatorColor,
borderRadius: BorderRadius.circular(
(monthDateBoxSize / 4) * 2),
),
),
),
.theme.markedIndicatorColor,
),
],
],

View file

@ -86,6 +86,10 @@ class DatePicker extends StatelessWidget {
return Padding(
padding: const EdgeInsets.all(2.0),
child: PickableDate(
isMarked: controller.markedDates?.any(
(e) => isSameDay(e, todayDate),
) ??
false,
isOffMonth: date.month != todayDate.month,
isDisabled:
isDisabled(addedIndex + index, daysToSkip, todayDate),
@ -106,11 +110,12 @@ class DatePicker extends StatelessWidget {
bool isToday(DateTime date) {
DateTime now = DateTime.now();
return date.year == now.year &&
date.month == now.month &&
date.day == now.day;
return isSameDay(date, now);
}
bool isSameDay(DateTime a, DateTime b) =>
a.year == b.year && a.month == b.month && a.day == b.day;
bool isDisabled(int index, int daysToSkip, DateTime date) {
return DateTime(
date.year,

View file

@ -4,10 +4,12 @@
import 'package:flutter/material.dart';
import 'package:flutter_date_time_picker/flutter_date_time_picker.dart';
import 'package:flutter_date_time_picker/src/widgets/marked_icon.dart';
class PickableDate extends StatelessWidget {
const PickableDate({
super.key,
required this.isMarked,
required this.isSelected,
required this.isDisabled,
required this.theme,
@ -17,6 +19,7 @@ class PickableDate extends StatelessWidget {
required this.isToday,
});
final bool isMarked;
final bool isSelected;
final bool isDisabled;
final bool isToday;
@ -33,7 +36,9 @@ class PickableDate extends StatelessWidget {
if (isDisabled) return;
onPressed.call(date);
},
child: Container(
child: Stack(
children: [
Container(
decoration: BoxDecoration(
color: getColor(
isToday,
@ -54,6 +59,15 @@ class PickableDate extends StatelessWidget {
),
),
),
if (isMarked) ...[
MarkedIcon(
color: theme.markedIndicatorColor,
width: theme.monthDateBoxSize / 4,
height: theme.monthDateBoxSize / 4,
),
],
],
),
);
}

View file

@ -8,6 +8,7 @@ import 'package:flutter_date_time_picker/src/extensions/date_time.dart';
import 'package:flutter_date_time_picker/src/extensions/time_of_day.dart';
import 'package:flutter_date_time_picker/src/models/date_box_current_theme.dart';
import 'package:flutter_date_time_picker/src/utils/date_time_picker_controller.dart';
import 'package:flutter_date_time_picker/src/widgets/marked_icon.dart';
import 'package:intl/intl.dart';
class WeekDateTimePicker extends StatelessWidget {
@ -107,20 +108,12 @@ class WeekDateTimePicker extends StatelessWidget {
),
),
if (shouldMark(index)) ...[
Align(
alignment: Alignment.bottomRight,
child: Container(
MarkedIcon(
width: weekDateBoxSize / 3,
height: weekDateBoxSize / 3,
decoration: BoxDecoration(
color: dateTimePickerController
.theme.markedIndicatorColor ??
Theme.of(context).indicatorColor,
borderRadius:
BorderRadius.circular(weekDateBoxSize * 2),
),
),
),
.theme.markedIndicatorColor,
)
],
],
),

View file

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