flutter_cupertino_date_picker 1.0.12

  • Readme
  • Changelog
  • Example
  • Installing
  • 98

Flutter Cupertino Date Picker #

[pub packages] | 中文说明

Flutter cupertino date picker.

Example

Usage #

1. Depend

Add this to you package's pubspec.yaml file:

dependencies:
  flutter_cupertino_date_picker: ^1.0.12

2. Install

Run command:

$ flutter packages get

3. Import

Import in Dart code:

import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

4. Display DatePicker

Bottom Sheet DatePicker #
/// Display date picker in bottom sheet.
///
/// context: [BuildContext]
/// minDateTime: [DateTime] minimum date time
/// maxDateTime: [DateTime] maximum date time
/// initialDateTime: [DateTime] initial date time for selected
/// dateFormat: [String] date format pattern
/// locale: [DateTimePickerLocale] internationalization
/// pickerMode: [DateTimePickerMode] display mode: date(DatePicker)、time(TimePicker)、datetime(DateTimePicker)
/// pickerTheme: [DateTimePickerTheme] the theme of date time picker
/// onCancel: [DateVoidCallback] pressed title cancel widget event
/// onClose: [DateVoidCallback] date picker closed event
/// onChange: [DateValueCallback] selected date time changed event
/// onConfirm: [DateValueCallback] pressed title confirm widget event
DatePicker.showDatePicker(
  BuildContext context,
  DateTime minDateTime,
  DateTime maxDateTime,
  DateTime initialDateTime,
  String dateFormat,
  DateTimePickerLocale locale: DATETIME_PICKER_LOCALE_DEFAULT,
  DateTimePickerMode pickerMode: DateTimePickerMode.date,
  DateTimePickerTheme pickerTheme: DatePickerTheme.Default,
  DateVoidCallback onCancel,
  DateVoidCallback onClose,
  DateValueCallback onChange,
  DateValueCallback onConfirm,
});
DatePicker Widget #
/// Display date picker widget.
///
/// minDateTime: [DateTime] minimum date time
/// maxDateTime: [DateTime] maximum date time
/// initialDateTime: [DateTime] initial date time for selected
/// dateFormat: [String] date format pattern
/// locale: [DateTimePickerLocale] internationalization
/// pickerTheme: [DateTimePickerTheme] the theme of date time picker
/// onCancel: [DateVoidCallback] pressed title cancel widget event
/// onChange: [DateValueCallback] selected date time changed event
/// onConfirm: [DateValueCallback] pressed title confirm widget event
DatePickerWidget({
  DateTime minDateTime,
  DateTime maxDateTime,
  DateTime initialDateTime,
  String dateFormat: DATETIME_PICKER_DATE_FORMAT,
  DateTimePickerLocale locale: DATETIME_PICKER_LOCALE_DEFAULT,
  DateTimePickerTheme pickerTheme: DatePickerTheme.Default,
  DateVoidCallback onCancel,
  DateValueCallback onChange,
  DateValueCallback onConfirm,
})
TimePicker Widget #
/// Display time picker widget.
///
/// minDateTime: [DateTime] minimum date time
/// maxDateTime: [DateTime] maximum date time
/// initialDateTime: [DateTime] initial date time for selected
/// dateFormat: [String] date format pattern
/// locale: [DateTimePickerLocale] internationalization
/// pickerTheme: [DateTimePickerTheme] the theme of date time picker
/// minuteDivider: [int] minute restriction, e.g. 5: every 5th minute will be shown (0, 5, 10, 15 ...)
/// onCancel: [DateVoidCallback] pressed title cancel widget event
/// onChange: [DateValueCallback] selected date time changed event
/// onConfirm: [DateValueCallback] pressed title confirm widget event
TimePickerWidget({
  DateTime minDateTime,
  DateTime maxDateTime,
  DateTime initialDateTime,
  String dateFormat: DATETIME_PICKER_DATE_FORMAT,
  DateTimePickerLocale locale: DATETIME_PICKER_LOCALE_DEFAULT,
  DateTimePickerTheme pickerTheme: DatePickerTheme.Default,
  int minuteDivider: 1,
  DateVoidCallback onCancel,
  DateValueCallback onChange,
  DateValueCallback onConfirm,
})
DateTimePicker Widget #
/// Display date time picker widget.
///
/// minDateTime: [DateTime] minimum date time
/// maxDateTime: [DateTime] maximum date time
/// initialDateTime: [DateTime] initial date time for selected
/// dateFormat: [String] date format pattern
/// locale: [DateTimePickerLocale] internationalization
/// pickerTheme: [DateTimePickerTheme] the theme of date time picker
/// onCancel: [DateVoidCallback] pressed title cancel widget event
/// onChange: [DateValueCallback] selected date time changed event
/// onConfirm: [DateValueCallback] pressed title confirm widget event
DateTimePickerWidget({
  DateTime minDateTime,
  DateTime maxDateTime,
  DateTime initialDateTime,
  String dateFormat: DATETIME_PICKER_DATE_FORMAT,
  DateTimePickerLocale locale: DATETIME_PICKER_LOCALE_DEFAULT,
  DateTimePickerTheme pickerTheme: DatePickerTheme.Default,
  DateVoidCallback onCancel,
  DateValueCallback onChange,
  DateValueCallback onConfirm,
})

5. DateTimePickerLocale

Support:

  • en_us: English (EN) United States [Default locale]
  • zh_cn: Chinese (ZH) Simplified
  • pt_br: Portuguese (PT) Brazil
  • es: Spanish (ES)
  • ro: Romanian (RO)
  • bn: Bengali (BN)
  • ar: Arabic (ar)
  • jp: Japanese (JP)
  • ru: Russian (RU)
  • de: German (DE)
  • ko: Korea (KO)
  • it: Italian (IT)
  • hu: Hungarian(HU)
Add more language #
1. Add language i18n file #

Fork this project, add language file in lib/src/i18n/ directory, e.g. strings_en_us.dart.

/// English (EN) United States
class _StringsEnUs extends _StringsI18n {
  const _StringsEnUs();

  @override
  String getCancelText() {
    // TODO return cancel widget's text
    return null;
  }

  @override
  String getDoneText() {
    // TODO return done widget's text
    return null;
  }

  @override
  List<String> getMonths() {
    // TODO return the array of month [January, February ... December]
    return null;
  }

  @override
  List<String> getWeeksFull() {
    // TODO return the array of week's full name [Monday, Tuesday ... Sunday]
    return null;
  }

  @override
  List<String> getWeeksShort() {
    // TODO return the array of week's short name [Mon, Tue ... Sun]
    return null;
  }
}
2. Add Locale #

Add language locale in lib/src/i18n/date_picker_i18n.dart file.

enum DateTimePickerLocale {
  /// English (EN) United States
  en_us,
}
3. Add Locale-Language relationship #

Add language-locale relationship in lib/src/i18n/date_picker_i18n.dart file.

const Map<DateTimePickerLocale, _StringsI18n> datePickerI18n = {
  DateTimePickerLocale.en_us: const _StringsEnUs(),
};

6. dateFormat

PatternMeaninge.g.
yyyyyear2019, 2020
yyyear, 2 digits19, 20
MMMMmonthJanuary(en_us), 01(zh_cn)
MMMmonth, abbreviatedJan(en_us), 01(zh_cn)
MMmonth, 2 digits01、11
Mmonth1, 11
ddday in month, 2 digits05, 25
dday in month5, 25
EEEEday of weekMonday(en_us), 星期一(zh_cn)
EEEday of week, abbreviatedMon(en_us), 周一(zh_cn)
HHhour (0~23), 2 digits04, 12, 20
Hhour (0~23)4, 12, 20
mmminute, 2 digits05, 40
mminute5, 40
sssecond, 2 digits06, 55
ssecond6, 55
yyyy年format2019年, 2020年
H时format5时, 21时
Date Format Separator #

Support separator: |,-._:.

7. DateTimePickerTheme

/// DateTimePicker theme.
///
/// [backgroundColor] DatePicker's background color.
/// [cancelTextStyle] Default cancel widget's [TextStyle].
/// [confirmTextStyle] Default confirm widget's [TextStyle].
/// [cancel] Custom cancel widget.
/// [confirm] Custom confirm widget.
/// [title] Custom title widget. If specify a title widget, the cancel and confirm widgets will not display. Must set [titleHeight] value for custom title widget.
/// [showTitle] Whether display title widget or not. If set false, the default cancel and confirm widgets will not display, but the custom title widget will display if had specified one custom title widget.
/// [pickerHeight] The value of DatePicker's height.
/// [titleHeight] The value of DatePicker's title height.
/// [itemHeight] The value of DatePicker's column height.
/// [itemTextStyle] The value of DatePicker's column [TextStyle].
const DateTimePickerTheme({
  this.backgroundColor: DATETIME_PICKER_BACKGROUND_COLOR,
  this.cancelTextStyle,
  this.confirmTextStyle,
  this.cancel,
  this.confirm,
  this.title,
  this.showTitle: DATETIME_PICKER_SHOW_TITLE_DEFAULT,
  this.pickerHeight: DATETIME_PICKER_HEIGHT,
  this.titleHeight: DATETIME_PICKER_TITLE_HEIGHT,
  this.itemHeight: DATETIME_PICKER_ITEM_HEIGHT,
  this.itemTextStyle: DATETIME_PICKER_ITEM_TEXT_STYLE,
});

Example #

Example sources

Example APK

Example APK Download

DatePicker #

Example: DatePicker

Example: DatePickerWidget

TimePicker #

Example: TimePicker

Example: TimePickerWidget

DateTimePicker #

Example: DateTimePicker

Example: DateTimePickerWidget

License #

Copyright 2018 wuzhen

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

1.0.12 #

  • Fixed bug: when onClose is null, catch exception Unhandled Exception: NoSuchMethodError: The method 'call' was called on null. Receiver: null. Issues: #40 and #43.

1.0.11 #

  • Added minuteDivider parameter.

1.0.10 #

  • Added onClose callback.

1.0.9 #

  • Added Hungarian language support.

1.0.8 #

  • Refactor i18n codes.

1.0.7 #

  • Added Italian language support.

1.0.6 #

  • Added Korea language support.

1.0.5 #

  • Added German language support.

1.0.4 #

  • Added Russian language support.

1.0.3 #

  • Added Japanese language support.

1.0.2 #

  • Added Arabic language support.

1.0.1 #

  • Added Bengali language support.

1.0.0 #

  • Refactor code.
  • Support DatePickerTimePickerDateTimePicker.
  • Support DatePickerWidgetTimePickerWidgetDateTimePickerWidget.
  • Upgrade date format.
  • Add DateTimePickerTheme.
  • Add DateTimePickerLocale for locale.

0.8.0 #

  • Support set the value of minimum DateTime and maximum DateTime.

0.7.0 #

  • Change days in a month when moth changes.

0.6.0 #

  • Add DatePickerWidget widget for display DatePicker in page.

0.5.0 #

  • Add onChanged2(DateTime dateTime, List<int> selectedIndex) callback.
  • Add onConfirm2(DateTime dateTime, List<int> selectedIndex) callback.
  • Add minDateTime.
  • Add maxDateTime.
  • Add initialDateTime.

0.4.0 #

  • Add onCancel callback.

0.3.0 #

  • Support Flutter v1.0.

0.2.0 #

  • Add custom cancel and confirm button.

0.1.0 #

  • Refactor locale message.

0.0.7 #

  • Support locale Portuguese Brazil (pt-br)

0.0.6 #

  • Support English months.

0.0.5 #

  • Fix month and day in zh locale.

0.0.4 #

  • Support i18n.

0.0.2 #

  • Complete README file.

0.0.1 #

  • Initial Release.

example/README.md

Date Picker Example #

A Flutter application example of DatePicker.

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_cupertino_date_picker: ^1.0.12

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
96
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
98
Learn more about scoring.

We analyzed this package on Oct 16, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8