Customized Picker of Flutter Datetime Picker - flutter

Question

I'm trying to use customized datepicker with creating CustomPicker class as is on Readme.
The problem is the callback of onChanged and onConfirm does not return the updated date. However when I change DatePicker.showPicker to DatePicker.showDatePicker, the callback returns the correct date.
I'm using the following code. I spent hours to investigate this but no luck.
class CustomPicker extends CommonPickerModel {
CustomPicker({DateTime currentTime, LocaleType locale})
: super(locale: locale) {
this.currentTime = currentTime ?? DateTime.now();
}
String yearDigits(int value) {
return '$value';
}
String monthDigits(int value) {
return '$value';
}
#override
String leftStringAtIndex(int index) {
return index >= DateTime.now().year - 100 &&
index <= DateTime.now().year - 18
? '$index'
: null;
}
#override
String middleStringAtIndex(int index) {
return index <= 12 && index >= 1 ? monthDigits(index) : null;
}
#override
String rightStringAtIndex(int index) {
return null;
}
#override
String leftDivider() {
return '';
}
#override
String rightDivider() {
return '';
}
#override
List<int> layoutProportions() {
return [1, 1, 0];
}
#override
DateTime finalTime() {
return currentTime.isUtc
? DateTime.utc(currentTime.year, currentTime.month, 1, 0, 0, 0)
: DateTime(currentTime.month, currentTime.month, 1, 0, 0, 0);
}
}
DatePicker.showPicker(
// ↑ When I change this to DatePicker.showDatePicker
// and comment out pickerModel, the value of print(dateTime) gets selected value.
context,
showTitleActions: true,
onConfirm: (dateTime) {
print(dateTime); // output same value and not updated one
},
pickerModel: CustomPicker(
currentTime: DateTime(_birthYear, _birthMonth, 1),
),
locale: LocaleType.en
);

Answer 1

Okay. So I am not an expert with the Flutter DateTime Picker package but I needed it for a project and so needed to figure out a way for the custom picker, and here is how I solved it.
I realized the issue was with the finalTime() method and what it returns.
I checked the implementation on the package's Github - https://github.com/Realank/flutter_datetime_picker/blob/0b0be9623e905299befc10569f83f3bd11b36125/lib/src/date_model.dart#L494 and picked the sample model for both date & time. It still didn't work until I made sure to update the current left index and the current middle index.
I don't know if my approach is the best, but here is how I solved it.
Here is my solution:
I updated the _currentLeftIndex variable in the setLeftIndex() method:
void setLeftIndex(int index) {
print('left index: '+index.toString());
_currentLeftIndex = index;
....
and then updated the _currentMiddleIndex variable in the setMiddleIndex() method:
void setMiddleIndex(int index) {
print('middle index: '+index.toString());
_currentMiddleIndex = index;
....
Find the full code implementation below:
Note: Remember to import 'date_format.dart'.
...
import 'package:flutter_datetime_picker/src/date_format.dart';
class CustomPicker extends CommonPickerModel {
List<String> leftList;
List<String> middleList;
List<String> rightList;
DateTime currentTime;
int _currentLeftIndex;
int _currentMiddleIndex;
int _currentRightIndex;
LocaleType locale;
DateTime maxTime;
DateTime minTime;
CustomPicker({DateTime currentTime, DateTime maxTime, DateTime minTime, LocaleType locale})
: super(locale: locale) {
this.currentTime = currentTime ?? DateTime.now();
_currentLeftIndex = 0;
_currentMiddleIndex = this.currentTime.hour;
_currentRightIndex = this.currentTime.minute;
this.setLeftIndex(0);
this.setMiddleIndex(this.currentTime.hour);
this.setRightIndex(this.currentTime.minute);
if (currentTime != null) {
this.currentTime = currentTime ?? DateTime.now();
if (maxTime != null &&
(currentTime.isBefore(maxTime) || currentTime.isAtSameMomentAs(maxTime))) {
this.maxTime = maxTime;
}
if (minTime != null &&
(currentTime.isAfter(minTime) || currentTime.isAtSameMomentAs(minTime))) {
this.minTime = minTime;
}
} else {
this.maxTime = maxTime;
this.minTime = minTime;
var now = DateTime.now();
if (this.minTime != null && this.minTime.isAfter(now)) {
this.currentTime = this.minTime;
} else if (this.maxTime != null && this.maxTime.isBefore(now)) {
this.currentTime = this.maxTime;
} else {
this.currentTime = now;
}
}
if (this.minTime != null && this.maxTime != null && this.maxTime.isBefore(this.minTime)) {
// invalid
this.minTime = null;
this.maxTime = null;
}
if (this.minTime != null && isAtSameDay(this.minTime, this.currentTime)) {
_currentMiddleIndex = this.currentTime.hour - this.minTime.hour;
if (_currentMiddleIndex == 0) {
_currentRightIndex = this.currentTime.minute - this.minTime.minute;
}
}
}
bool isAtSameDay(DateTime day1, DateTime day2) {
return day1 != null &&
day2 != null &&
day1.difference(day2).inDays == 0 &&
day1.day == day2.day;
}
#override
void setLeftIndex(int index) {
print('left index: '+index.toString());
_currentLeftIndex = index;
// TODO: implement setLeftIndex
super.setLeftIndex(index);
DateTime time = currentTime.add(Duration(days: index));
if (isAtSameDay(minTime, time)) {
var index = min(24 - minTime.hour - 1, _currentMiddleIndex);
this.setMiddleIndex(index);
} else if (isAtSameDay(maxTime, time)) {
var index = min(maxTime.hour, _currentMiddleIndex);
this.setMiddleIndex(index);
}
}
#override
void setMiddleIndex(int index) {
print('middle index: '+index.toString());
_currentMiddleIndex = index;
// TODO: implement setMiddleIndex
super.setMiddleIndex(index);
DateTime time = currentTime.add(Duration(days: _currentLeftIndex));
if (isAtSameDay(minTime, time) && index == 0) {
var maxIndex = 60 - minTime.minute - 1;
if (_currentRightIndex > maxIndex) {
_currentRightIndex = maxIndex;
}
} else if (isAtSameDay(maxTime, time) && _currentMiddleIndex == maxTime.hour) {
var maxIndex = maxTime.minute;
if (_currentRightIndex > maxIndex) {
_currentRightIndex = maxIndex;
}
}
}
#override
String leftStringAtIndex(int index) {
print('left string index: '+index.toString());
DateTime time = currentTime.add(Duration(days: index));
if (minTime != null && time.isBefore(minTime) && !isAtSameDay(minTime, time)) {
return null;
} else if (maxTime != null && time.isAfter(maxTime) && !isAtSameDay(maxTime, time)) {
return null;
}
return formatDate(time, [ymdw], locale);
}
#override
String middleStringAtIndex(int index) {
print('middle string index: '+index.toString());
if (index >= 0 && index < 24) {
DateTime time = currentTime.add(Duration(days: _currentLeftIndex));
if (isAtSameDay(minTime, time)) {
if (index >= 0 && index < 24 - minTime.hour) {
return digits(minTime.hour + index, 2);
} else {
return null;
}
} else if (isAtSameDay(maxTime, time)) {
if (index >= 0 && index <= maxTime.hour) {
return digits(index, 2);
} else {
return null;
}
}
return digits(index, 2);
}
return null;
}
#override
String rightStringAtIndex(int index) {
print('right string index: '+index.toString());
if (index >= 0 && index < 60) {
DateTime time = currentTime.add(Duration(days: _currentLeftIndex));
if (isAtSameDay(minTime, time) && _currentMiddleIndex == 0) {
if (index >= 0 && index < 60 - minTime.minute) {
return digits(minTime.minute + index, 2);
} else {
return null;
}
} else if (isAtSameDay(maxTime, time) && _currentMiddleIndex >= maxTime.hour) {
if (index >= 0 && index <= maxTime.minute) {
return digits(index, 2);
} else {
return null;
}
}
return digits(index, 2);
}
return null;
}
#override
DateTime finalTime() {
print('all index: ');
print('left index: '+_currentLeftIndex.toString());
print('middle index: '+_currentMiddleIndex.toString());
print('right index: '+_currentRightIndex.toString());
DateTime time = currentTime.add(Duration(days: _currentLeftIndex));
var hour = _currentMiddleIndex;
var minute = _currentRightIndex;
if (isAtSameDay(minTime, time)) {
hour += minTime.hour;
if (minTime.hour == hour) {
minute += minTime.minute;
}
}
return currentTime.isUtc
? DateTime.utc(time.year, time.month, time.day, hour, minute)
: DateTime(time.year, time.month, time.day, hour, minute);
}
#override
List<int> layoutProportions() {
return [4, 1, 1];
}
#override
String rightDivider() {
return ':';
}
}