來吧！Flutter(12) — DatePicker, DateRangePicker, TimePicker

Published in

Flutter Taipei

6 min readAug 22, 2020

在前幾個禮拜 Flutter 釋出了 1.20 版，其中包含了 DatePicker 以及 TimePicker 的優化。今天我將介紹，如何使用這兩種 Picker 以及 DateRangePicker。

這三種 Picker 都是被包裝成 Dialog 的形式，只要呼叫相對應的函數，就可以把 Picker 呼叫出來了。

DatePicker

呼叫 showDatePicker()，即可開啟 DatePicker。

建構子中，有四個引數被標記為 @requied，嘗試建立一個 showDatePicker 。

在上面的例子中，我們代入了 BuildContext，initialDate，firstDate 以及 lastDate
BuildContext：用來傳給 showDialog ，讓 Flutter 顯示 Dialog ，另外還有許多參數是直接使用全域變數，Ex：final Orientation orientation = MediaQuery.of(context).orientation; final ThemeData theme = Theme.of(context)…
initialDate：在開啟 DatePickerDialog 時，第一個被選到的日期。使用 DateTime.now() 取得今天日期。
firstDate：日期顯示的第一個月份，用 DateTime(2020, 01)設定 2020年1月為日期的第一個月份。
lastDate：日期顯示的最後一個月份，用 DateTime(2100, 12) 設定 2100年12月為日期的最後一個月份。

由 showDatePicker() 回傳的值，我們可以發現，回傳的是 Future<DateTime> 。什麼是 Future<DataTime>呢？

Future<T>表示是回傳非同步的值，在 showDatePicker 這個例子中，因為需要等到 DatePicker 結束之後，才能得到結果。 <T> 中的Ｔ表示泛型，也就是所有類型都可以接收，這邊是使用 DateTime。

那麼，要如何才能取得 Future<DateTime> 呢？我們可以利用 async 與 await 關鍵字來取得 DateTime 的值。如下：

如此表示，onPressed( ): 會呼叫一個非同步的函式，其中需要等待結果的函式是 showDatePicker 。

按下 OK 之後，就可以取得 DateTime 資料。

前面介紹可以用 DatePicker 單選一個日期，Flutter 另外提供了 DateRangePicker 來選擇一個日期區間。
如同 DatePicker，Flutter 也提供了 showDateRangePicker() 函式來開啟 DateRangePicker，下面為 showDateRangePicker() 的內容

由上方的函式可得知，使用 showDateRangePicker 只需要三個必要的引數：BuildCotext context，DateTime firstDate，DateTime lastDate。
這三個引數的用途與 DatePicker 相同，這邊不在覆述。

同樣地，DateRangePicker 的結果也是由 Future<T> 包起來，表示跟 DatePicker 一樣，都是非同步的。不過跟 DatePicker 不同，DateRangePicker 的結果是 Future<DateTimeRange>。
在 DateTimeRange 中，有兩個參數，一個是 DateTime start，另一個則是 DateTime end。在 DateRangePicker 結束之後，我們便可以使用 DateTimeRang 的 start 與 end。

showTimePicker

在 showTimePicker 函式中，有兩個被標記 @required 的引數，一為BuildContext context，另一為 TimeOfDay initialTime。
BuildContext context 的功能與前面相同。
TimeOfDay initialTime 則是包含時間的日期。