Tìm hiểu sâu hơn về DatePicker trong Flutter

Tram Ho

Mình là dev IOS , khi làm app flutter thì mình thắc mắc Flutter sẽ show ngày tháng sinh nhật, show lịch hẹn bằng widget gì, mình có tìm hiểu thì có thể dùng thằng DatePicker giống 1 calendar để chọn ngày tháng năm, cái này thì chắc dev Android không lạ gì với nó.

1. Cài đặt DatePicker.

Các bạn hãy thêm đoạn code sau :

Kết quả:

Chỉ cần vài dòng code là bạn có thể implement DatePicker:

Để setting giới hạn của DatePicker , bạn set code cho 2 thuộc tính : firstDate, lastDate. Ở bên trên mình set giới hạn cho đến Picker là Min Year Date : 2000, Max Year Date: 2025.

2. Setting hộp thoại để nhập ngày tháng năm.

Nếu bạn không thích giao diện DatePicker như Calendar thì bạn có thể đổi nó sang giao diện nhập date vào 1 ô dialog:

Đơn giản trong function showDatePicker có thuộc tính initialEntryMode mặc đinh value của nó là DatePickerEntryMode.calendar, bạn thay nó thành DatePickerEntryMode.input. Rất đơn giản ^_^.

Bây giờ nếu bạn biết chắc sinh nhật là một năm nào rồi và bạn muốn chọn năm trước sau đó mới chọn ngày tháng thì trong function showDatePicker bạn thêm thuộc tính initialDatePickerMode:DatePickerMode.year

3. Setting người dùng chỉ được nhập ngày trong giới hạn cụ thể.

Nếu bạn muốn 1 người dùng chỉ được chọn một số ngày trong 1 tháng thì bạn thêm thuộc tính :
selectableDayPredicate. Bạn hãy thêm đoạn code sau :

Kết quả :

4. Thay đổi text DatePicker.

Bạn thử thêm các 3 dòng code vào trong function showDatePicker:

Kết quả :

5. Thay đổi message lỗi.

Khi DatePicker đang ở dạng nhập bạn có thể thay đổi text message lỗi :

Kết quả :

Tương tự bạn có thể change label và hint text. Đoạn này các bạn tự thử nhé :

6. Cách để có giao diện DatePicker giống với target Platform?

Hiện tại thì mình đang dùng Material Design, vậy làm thế nào để dùng được Cupertino Datepicker in iOS?
Các bạn import đoạn code sau :

Như vậy khi chạy máy Android thì sẽ hiển thị Datepicker trong material còn chạy IOS thì sẽ hiển thị DatePicker của cupertino như hình dưới :

Cám ơn các bạn đã theo dõi bài viết của mình .

Tài liệu tham khảo :

https://medium.com/flutter-community/a-deep-dive-into-datepicker-in-flutter-37e84f7d8d6c

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo