Skip to content

Commit 4c099b3

Browse files
author
Liu Yanbo
committed
add customize example
1 parent 5b5ace7 commit 4c099b3

File tree

5 files changed

+173
-45
lines changed

5 files changed

+173
-45
lines changed

‎CHANGELOG.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,5 @@
3030
## [1.1.8] - update something
3131
## [1.1.9] - add German
3232
## [1.2.0] - add support for time zone
33-
## [1.2.1] - add more languages
33+
## [1.2.1] - add more languages
34+
## [1.2.2] - add customize example

‎README.md

+75-1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ International:
3636
| -------------------------------- | -------------------------------- | ------------------------------ | -------------------------------- |
3737
| ![](screen_datetime_chinese.png) | ![](screen_datetime_english.png) | ![](screen_datetime_dutch.png) | ![](screen_datetime_russian.png) |
3838

39+
40+
## Demo App
41+
42+
![main page](main_page.png)
43+
3944
## Usage
4045

4146
```
@@ -56,10 +61,79 @@ FlatButton(
5661
));
5762
```
5863

59-
## Custom
64+
## Customize
6065

6166
If you want to customize your own style of date time picker, there is a class called CommonPickerModel, every type of date time picker is extended from this class, you can refer to other picker model (eg. DatePickerModel), and write your custom one, then pass this model to showPicker method, so that your own date time picker will appear, it’s easy, and will perfectly meet your demand
6267

68+
How to customize your own picker model:
69+
70+
```
71+
class CustomPicker extends CommonPickerModel {
72+
String digits(int value, int length) {
73+
return '$value'.padLeft(length, "0");
74+
}
75+
76+
CustomPicker({DateTime currentTime, LocaleType locale}) : super(locale: locale) {
77+
this.currentTime = currentTime ?? DateTime.now();
78+
this.setLeftIndex(this.currentTime.hour);
79+
this.setMiddleIndex(this.currentTime.minute);
80+
this.setRightIndex(this.currentTime.second);
81+
}
82+
83+
@override
84+
String leftStringAtIndex(int index) {
85+
if (index >= 0 && index < 24) {
86+
return this.digits(index, 2);
87+
} else {
88+
return null;
89+
}
90+
}
91+
92+
@override
93+
String middleStringAtIndex(int index) {
94+
if (index >= 0 && index < 60) {
95+
return this.digits(index, 2);
96+
} else {
97+
return null;
98+
}
99+
}
100+
101+
@override
102+
String rightStringAtIndex(int index) {
103+
if (index >= 0 && index < 60) {
104+
return this.digits(index, 2);
105+
} else {
106+
return null;
107+
}
108+
}
109+
110+
@override
111+
String leftDivider() {
112+
return "|";
113+
}
114+
115+
@override
116+
String rightDivider() {
117+
return "|";
118+
}
119+
120+
@override
121+
List<int> layoutProportions() {
122+
return [1, 2, 1];
123+
}
124+
125+
@override
126+
DateTime finalTime() {
127+
return currentTime.isUtc
128+
? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
129+
this.currentLeftIndex(), this.currentMiddleIndex(), this.currentRightIndex())
130+
: DateTime(currentTime.year, currentTime.month, currentTime.day, this.currentLeftIndex(),
131+
this.currentMiddleIndex(), this.currentRightIndex());
132+
}
133+
}
134+
```
135+
136+
63137
## Getting Started
64138

65139
For help getting started with Flutter, view our online [documentation](https://flutter.io/).

‎example/lib/main.dart

+95-42
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,70 @@ import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
33

44
void main() => runApp(new MyApp());
55

6+
class CustomPicker extends CommonPickerModel {
7+
String digits(int value, int length) {
8+
return '$value'.padLeft(length, "0");
9+
}
10+
11+
CustomPicker({DateTime currentTime, LocaleType locale}) : super(locale: locale) {
12+
this.currentTime = currentTime ?? DateTime.now();
13+
this.setLeftIndex(this.currentTime.hour);
14+
this.setMiddleIndex(this.currentTime.minute);
15+
this.setRightIndex(this.currentTime.second);
16+
}
17+
18+
@override
19+
String leftStringAtIndex(int index) {
20+
if (index >= 0 && index < 24) {
21+
return this.digits(index, 2);
22+
} else {
23+
return null;
24+
}
25+
}
26+
27+
@override
28+
String middleStringAtIndex(int index) {
29+
if (index >= 0 && index < 60) {
30+
return this.digits(index, 2);
31+
} else {
32+
return null;
33+
}
34+
}
35+
36+
@override
37+
String rightStringAtIndex(int index) {
38+
if (index >= 0 && index < 60) {
39+
return this.digits(index, 2);
40+
} else {
41+
return null;
42+
}
43+
}
44+
45+
@override
46+
String leftDivider() {
47+
return "|";
48+
}
49+
50+
@override
51+
String rightDivider() {
52+
return "|";
53+
}
54+
55+
@override
56+
List<int> layoutProportions() {
57+
return [1, 2, 1];
58+
}
59+
60+
@override
61+
DateTime finalTime() {
62+
return currentTime.isUtc
63+
? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
64+
this.currentLeftIndex(), this.currentMiddleIndex(), this.currentRightIndex())
65+
: DateTime(currentTime.year, currentTime.month, currentTime.day, this.currentLeftIndex(),
66+
this.currentMiddleIndex(), this.currentRightIndex());
67+
}
68+
}
69+
670
class MyApp extends StatelessWidget {
771
// This widget is the root of your application.
872
@override
@@ -35,13 +99,10 @@ class HomePage extends StatelessWidget {
3599
maxTime: DateTime(2019, 6, 7),
36100
theme: DatePickerTheme(
37101
backgroundColor: Colors.blue,
38-
itemStyle: TextStyle(
39-
color: Colors.white, fontWeight: FontWeight.bold),
40-
doneStyle:
41-
TextStyle(color: Colors.white, fontSize: 16)),
102+
itemStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
103+
doneStyle: TextStyle(color: Colors.white, fontSize: 16)),
42104
onChanged: (date) {
43-
print('change $date in time zone ' +
44-
date.timeZoneOffset.inHours.toString());
105+
print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
45106
}, onConfirm: (date) {
46107
print('confirm $date');
47108
}, currentTime: DateTime.now(), locale: LocaleType.en);
@@ -52,10 +113,8 @@ class HomePage extends StatelessWidget {
52113
)),
53114
FlatButton(
54115
onPressed: () {
55-
DatePicker.showTimePicker(context, showTitleActions: true,
56-
onChanged: (date) {
57-
print('change $date in time zone ' +
58-
date.timeZoneOffset.inHours.toString());
116+
DatePicker.showTimePicker(context, showTitleActions: true, onChanged: (date) {
117+
print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
59118
}, onConfirm: (date) {
60119
print('confirm $date');
61120
}, currentTime: DateTime.now());
@@ -66,26 +125,20 @@ class HomePage extends StatelessWidget {
66125
)),
67126
FlatButton(
68127
onPressed: () {
69-
DatePicker.showDateTimePicker(context, showTitleActions: true,
70-
onChanged: (date) {
71-
print('change $date in time zone ' +
72-
date.timeZoneOffset.inHours.toString());
128+
DatePicker.showDateTimePicker(context, showTitleActions: true, onChanged: (date) {
129+
print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
73130
}, onConfirm: (date) {
74131
print('confirm $date');
75-
},
76-
currentTime: DateTime(2008, 12, 31, 23, 12, 34),
77-
locale: LocaleType.zh);
132+
}, currentTime: DateTime(2008, 12, 31, 23, 12, 34), locale: LocaleType.zh);
78133
},
79134
child: Text(
80135
'show date time picker (Chinese)',
81136
style: TextStyle(color: Colors.blue),
82137
)),
83138
FlatButton(
84139
onPressed: () {
85-
DatePicker.showDateTimePicker(context, showTitleActions: true,
86-
onChanged: (date) {
87-
print('change $date in time zone ' +
88-
date.timeZoneOffset.inHours.toString());
140+
DatePicker.showDateTimePicker(context, showTitleActions: true, onChanged: (date) {
141+
print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
89142
}, onConfirm: (date) {
90143
print('confirm $date');
91144
}, currentTime: DateTime(2008, 12, 31, 23, 12, 34));
@@ -96,52 +149,52 @@ class HomePage extends StatelessWidget {
96149
)),
97150
FlatButton(
98151
onPressed: () {
99-
DatePicker.showDateTimePicker(context, showTitleActions: true,
100-
onChanged: (date) {
101-
print('change $date in time zone ' +
102-
date.timeZoneOffset.inHours.toString());
152+
DatePicker.showDateTimePicker(context, showTitleActions: true, onChanged: (date) {
153+
print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
103154
}, onConfirm: (date) {
104155
print('confirm $date');
105-
},
106-
currentTime: DateTime(2008, 12, 31, 23, 12, 34),
107-
locale: LocaleType.nl);
156+
}, currentTime: DateTime(2008, 12, 31, 23, 12, 34), locale: LocaleType.nl);
108157
},
109158
child: Text(
110159
'show date time picker (Dutch)',
111160
style: TextStyle(color: Colors.blue),
112161
)),
113162
FlatButton(
114163
onPressed: () {
115-
DatePicker.showDateTimePicker(context, showTitleActions: true,
116-
onChanged: (date) {
117-
print('change $date in time zone ' +
118-
date.timeZoneOffset.inHours.toString());
164+
DatePicker.showDateTimePicker(context, showTitleActions: true, onChanged: (date) {
165+
print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
119166
}, onConfirm: (date) {
120167
print('confirm $date');
121-
},
122-
currentTime: DateTime(2008, 12, 31, 23, 12, 34),
123-
locale: LocaleType.ru);
168+
}, currentTime: DateTime(2008, 12, 31, 23, 12, 34), locale: LocaleType.ru);
124169
},
125170
child: Text(
126171
'show date time picker (Russian)',
127172
style: TextStyle(color: Colors.blue),
128173
)),
129174
FlatButton(
130175
onPressed: () {
131-
DatePicker.showDateTimePicker(context, showTitleActions: true,
132-
onChanged: (date) {
133-
print('change $date in time zone ' +
134-
date.timeZoneOffset.inHours.toString());
176+
DatePicker.showDateTimePicker(context, showTitleActions: true, onChanged: (date) {
177+
print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
135178
}, onConfirm: (date) {
136179
print('confirm $date');
137-
},
138-
currentTime: DateTime.utc(2019, 12, 31, 23, 12, 34),
139-
locale: LocaleType.de);
180+
}, currentTime: DateTime.utc(2019, 12, 31, 23, 12, 34), locale: LocaleType.de);
140181
},
141182
child: Text(
142183
'show date time picker in UTC (German)',
143184
style: TextStyle(color: Colors.blue),
144185
)),
186+
FlatButton(
187+
onPressed: () {
188+
DatePicker.showPicker(context, showTitleActions: true, onChanged: (date) {
189+
print('change $date in time zone ' + date.timeZoneOffset.inHours.toString());
190+
}, onConfirm: (date) {
191+
print('confirm $date');
192+
}, pickerModel: CustomPicker(currentTime: DateTime.now()), locale: LocaleType.en);
193+
},
194+
child: Text(
195+
'show custom time picker,\nyou can custom picker model like this',
196+
style: TextStyle(color: Colors.blue),
197+
)),
145198
],
146199
),
147200
),

‎main_page.png

108 KB
Loading

‎pubspec.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: flutter_datetime_picker
22
description: A date time picker for flutter, you can choose date / time / date&time in English Dutch and Chinese, and you can also custom your own picker content
3-
version: 1.2.1
3+
version: 1.2.2
44
author: Realank <[email protected]>
55
homepage: https://github.com/Realank/flutter_datetime_picker
66

0 commit comments

Comments
 (0)