wheel_date_picker_sheet 0.1.0
wheel_date_picker_sheet: ^0.1.0 copied to clipboard
A modern, easy date and time picker shown as a bottom sheet with scrolling day / month / year (and hour / minute) wheels. dd/MM/yyyy preview, future dates, English and Lao labels built in.
wheel_date_picker_sheet #
A modern, easy-to-use date and time picker for Flutter. It opens as a bottom sheet with three scrolling wheels — day, month, year — instead of a calendar grid, so picking a date far from today (a date of birth, a document's expiry date) takes a couple of flicks instead of paging through months.
dd/MM/yyyypreview of the selected date (custom formatter supported)- Opens on 01/01/2000 when no initial date is given
- Future dates allowed by default (up to 50 years ahead)
- Invalid days are corrected as you scroll (31 Jan → Feb gives 28/29 Feb)
- Tap a row to select it, or scroll; "Today" jumps back to today
- Hour / minute time picker in the same style
- English and Lao labels built in, or bring your own
- Colours follow your
ThemeData, or set them withWheelPickerStyle - A centred dialog instead of a sheet on wide (desktop / tablet) screens
- No dependencies beyond Flutter
Usage #
import 'package:wheel_date_picker_sheet/wheel_date_picker_sheet.dart';
// Date of birth: no future dates.
final dob = await showWheelDatePicker(
context: context,
firstDate: DateTime(1900),
lastDate: DateTime.now(),
);
// Document expiry date: future dates are allowed by default.
final expiry = await showWheelDatePicker(
context: context,
initialDate: DateTime.now(),
);
// Time.
final time = await showWheelTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
Both resolve to null when the sheet is cancelled or dismissed.
Options #
| Parameter | Default | |
|---|---|---|
initialDate |
DateTime(2000) |
Clamped into firstDate..lastDate |
firstDate |
DateTime(1900) |
|
lastDate |
31 Dec, 50 years from now | Pass DateTime.now() to forbid future dates |
title |
"Select date" | |
labels |
from the app locale | WheelPickerLabels.en, WheelPickerLabels.lo, or your own |
style |
from ThemeData |
WheelPickerStyle(primaryColor: ..., highlightColor: ...) |
formatter |
formatDdMmYyyy |
Preview line, e.g. (d) => DateFormat.yMMMd().format(d) |
showTodayButton |
true |
|
dialogBreakpoint |
1024 |
Screen width from which a dialog is used |
Custom language #
const thai = WheelPickerLabels(
selectDate: 'เลือกวันที่', selectTime: 'เลือกเวลา', today: 'วันนี้', now: 'ตอนนี้',
day: 'วัน', month: 'เดือน', year: 'ปี', hour: 'ชั่วโมง', minute: 'นาที',
cancel: 'ยกเลิก', confirm: 'ยืนยัน',
monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน',
'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
);
await showWheelDatePicker(context: context, labels: thai);