flutter_datetime_picker.dart 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. library flutter_datetime_picker;
  2. export 'dateModel.dart';
  3. import 'package:flutter/cupertino.dart';
  4. import 'package:flutter/material.dart';
  5. import 'dateModel.dart';
  6. typedef DateChangedCallback(DateTime time);
  7. typedef String StringAtIndexCallBack(int index);
  8. const double _kDatePickerHeight = 210.0;
  9. const double _kDatePickerTitleHeight = 44.0;
  10. const double _kDatePickerItemHeight = 36.0;
  11. const double _kDatePickerFontSize = 18.0;
  12. class DatePicker {
  13. ///
  14. /// Display date picker bottom sheet.
  15. ///
  16. static void showDatePicker(BuildContext context,
  17. {bool showTitleActions: true,
  18. DateChangedCallback onChanged,
  19. DateChangedCallback onConfirm,
  20. locale: 'en_NZ',
  21. BasePickerModel pickerModel}) {
  22. Navigator.push(
  23. context,
  24. new _DatePickerRoute(
  25. showTitleActions: showTitleActions,
  26. onChanged: onChanged,
  27. onConfirm: onConfirm,
  28. locale: locale,
  29. theme: Theme.of(context, shadowThemeOnly: true),
  30. barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
  31. pickerModel: pickerModel));
  32. }
  33. }
  34. class _DatePickerRoute<T> extends PopupRoute<T> {
  35. _DatePickerRoute({
  36. this.showTitleActions,
  37. this.onChanged,
  38. this.onConfirm,
  39. this.theme,
  40. this.barrierLabel,
  41. this.locale,
  42. RouteSettings settings,
  43. pickerModel,
  44. }) : this.pickerModel = pickerModel ?? DatePickerModel(),
  45. super(settings: settings);
  46. final bool showTitleActions;
  47. final DateChangedCallback onChanged;
  48. final DateChangedCallback onConfirm;
  49. final ThemeData theme;
  50. final String locale;
  51. final BasePickerModel pickerModel;
  52. @override
  53. Duration get transitionDuration => const Duration(milliseconds: 200);
  54. @override
  55. bool get barrierDismissible => true;
  56. @override
  57. final String barrierLabel;
  58. @override
  59. Color get barrierColor => Colors.black54;
  60. AnimationController _animationController;
  61. @override
  62. AnimationController createAnimationController() {
  63. assert(_animationController == null);
  64. _animationController = BottomSheet.createAnimationController(navigator.overlay);
  65. return _animationController;
  66. }
  67. @override
  68. Widget buildPage(
  69. BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
  70. Widget bottomSheet = new MediaQuery.removePadding(
  71. context: context,
  72. removeTop: true,
  73. child: _DatePickerComponent(
  74. onChanged: onChanged,
  75. locale: this.locale,
  76. route: this,
  77. pickerModel: pickerModel,
  78. ),
  79. );
  80. if (theme != null) {
  81. bottomSheet = new Theme(data: theme, child: bottomSheet);
  82. }
  83. return bottomSheet;
  84. }
  85. }
  86. class _DatePickerComponent extends StatefulWidget {
  87. _DatePickerComponent(
  88. {Key key, @required this.route, this.onChanged, this.locale, this.pickerModel});
  89. final DateChangedCallback onChanged;
  90. final _DatePickerRoute route;
  91. final String locale;
  92. final DatePickerModel pickerModel;
  93. @override
  94. State<StatefulWidget> createState() {
  95. return _DatePickerState();
  96. }
  97. }
  98. class _DatePickerState extends State<_DatePickerComponent> {
  99. FixedExtentScrollController leftScrollCtrl, middleScrollCtrl, rightScrollCtrl;
  100. @override
  101. void initState() {
  102. super.initState();
  103. leftScrollCtrl =
  104. new FixedExtentScrollController(initialItem: widget.pickerModel.currentLeftIndex());
  105. middleScrollCtrl =
  106. new FixedExtentScrollController(initialItem: widget.pickerModel.currentMiddleIndex());
  107. rightScrollCtrl =
  108. new FixedExtentScrollController(initialItem: widget.pickerModel.currentRightIndex());
  109. }
  110. @override
  111. Widget build(BuildContext context) {
  112. return new GestureDetector(
  113. child: new AnimatedBuilder(
  114. animation: widget.route.animation,
  115. builder: (BuildContext context, Widget child) {
  116. return new ClipRect(
  117. child: new CustomSingleChildLayout(
  118. delegate: new _BottomPickerLayout(widget.route.animation.value,
  119. showTitleActions: widget.route.showTitleActions),
  120. child: new GestureDetector(
  121. child: Material(
  122. color: Colors.transparent,
  123. child: _renderPickerView(),
  124. ),
  125. ),
  126. ),
  127. );
  128. },
  129. ),
  130. );
  131. }
  132. void _notifyDateChanged() {
  133. if (widget.onChanged != null) {
  134. widget.onChanged(widget.pickerModel.finalTime());
  135. }
  136. }
  137. Widget _renderPickerView() {
  138. Widget itemView = _renderItemView();
  139. if (widget.route.showTitleActions) {
  140. return Column(
  141. children: <Widget>[
  142. _renderTitleActionsView(),
  143. itemView,
  144. ],
  145. );
  146. }
  147. return itemView;
  148. }
  149. Widget _renderColumnView(StringAtIndexCallBack stringAtIndexCB, ScrollController scrollController,
  150. ValueChanged<int> selectedChanged) {
  151. return Expanded(
  152. flex: 1,
  153. child: Container(
  154. padding: EdgeInsets.all(8.0),
  155. height: _kDatePickerHeight,
  156. decoration: BoxDecoration(color: Colors.white),
  157. child: CupertinoPicker.builder(
  158. backgroundColor: Colors.white,
  159. scrollController: scrollController,
  160. itemExtent: _kDatePickerItemHeight,
  161. onSelectedItemChanged: (int index) {
  162. selectedChanged(index);
  163. },
  164. useMagnifier: true,
  165. itemBuilder: (BuildContext context, int index) {
  166. final content = stringAtIndexCB(index);
  167. if (content == null) {
  168. return null;
  169. }
  170. return Container(
  171. height: _kDatePickerItemHeight,
  172. alignment: Alignment.center,
  173. child: Text(
  174. content,
  175. style: TextStyle(color: Color(0xFF000046), fontSize: _kDatePickerFontSize),
  176. textAlign: TextAlign.start,
  177. ),
  178. );
  179. })),
  180. );
  181. }
  182. Widget _renderItemView() {
  183. return Row(
  184. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  185. children: <Widget>[
  186. _renderColumnView(widget.pickerModel.leftStringAtIndex, leftScrollCtrl, (index) {
  187. widget.pickerModel.setLeftIndex(index);
  188. _notifyDateChanged();
  189. }),
  190. _renderColumnView(widget.pickerModel.middleStringAtIndex, middleScrollCtrl, (index) {
  191. widget.pickerModel.setMiddleIndex(index);
  192. _notifyDateChanged();
  193. }),
  194. _renderColumnView(widget.pickerModel.rightStringAtIndex, rightScrollCtrl, (index) {
  195. widget.pickerModel.setRightIndex(index);
  196. _notifyDateChanged();
  197. }),
  198. ],
  199. );
  200. }
  201. // Title View
  202. Widget _renderTitleActionsView() {
  203. String done = _localeDone();
  204. String cancel = _localeCancel();
  205. return Container(
  206. height: _kDatePickerTitleHeight,
  207. decoration: BoxDecoration(color: Colors.white),
  208. child: Row(
  209. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  210. children: <Widget>[
  211. Container(
  212. height: _kDatePickerTitleHeight,
  213. child: FlatButton(
  214. child: Text(
  215. '$cancel',
  216. style: TextStyle(
  217. color: Theme.of(context).unselectedWidgetColor,
  218. fontSize: 16.0,
  219. ),
  220. ),
  221. onPressed: () => Navigator.pop(context),
  222. ),
  223. ),
  224. Container(
  225. height: _kDatePickerTitleHeight,
  226. child: FlatButton(
  227. child: Text(
  228. '$done',
  229. style: TextStyle(
  230. color: Theme.of(context).primaryColor,
  231. fontSize: 16.0,
  232. ),
  233. ),
  234. onPressed: () {
  235. if (widget.route.onConfirm != null) {
  236. widget.route.onConfirm(widget.pickerModel.finalTime());
  237. }
  238. Navigator.pop(context);
  239. },
  240. ),
  241. ),
  242. ],
  243. ),
  244. );
  245. }
  246. String _localeDone() {
  247. if (widget.locale.matchAsPrefix('cn') == null) {
  248. return 'Done';
  249. } else {
  250. return '确定';
  251. }
  252. }
  253. String _localeCancel() {
  254. if (widget.locale.matchAsPrefix('cn') == null) {
  255. return 'Cancel';
  256. } else {
  257. return '取消';
  258. }
  259. }
  260. }
  261. class _BottomPickerLayout extends SingleChildLayoutDelegate {
  262. _BottomPickerLayout(this.progress, {this.itemCount, this.showTitleActions});
  263. final double progress;
  264. final int itemCount;
  265. final bool showTitleActions;
  266. @override
  267. BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
  268. double maxHeight = _kDatePickerHeight;
  269. if (showTitleActions) {
  270. maxHeight += _kDatePickerTitleHeight;
  271. }
  272. return new BoxConstraints(
  273. minWidth: constraints.maxWidth,
  274. maxWidth: constraints.maxWidth,
  275. minHeight: 0.0,
  276. maxHeight: maxHeight);
  277. }
  278. @override
  279. Offset getPositionForChild(Size size, Size childSize) {
  280. double height = size.height - childSize.height * progress;
  281. return new Offset(0.0, height);
  282. }
  283. @override
  284. bool shouldRelayout(_BottomPickerLayout oldDelegate) {
  285. return progress != oldDelegate.progress;
  286. }
  287. }