日期時間組件

在進入較進階的組件內容之前，我們在介紹一下有關日期與時間的組件內容。在表單輸入或是報表查詢功能的頁面，我們通常會需要使用日期時間的選取器功能提供使用者能夠快速方便的進行設定，在Flutter SDK中根據偏好使用material或是cupertino風格的組件。

常用功能

• showDatePicker
• showDateRangePicker
• showTimePicker
• 自定義日期選擇器

日期選取器

    var datePickButton = ElevatedButton(
      onPressed: () async {
        var result = await showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(2000, 01),
          lastDate: DateTime(2021, 12),
        );

        if (result != null) {
          setState(() {
            selectedDateTime = result;
          });
        }
      },
      child: const Text('日期選擇器'),
    );

日期區間選取器

    var dateRangePickButton = ElevatedButton(
      onPressed: () async {
        var result = await showDateRangePicker(
          context: context,
          firstDate: DateTime(2021, 01),
          lastDate: DateTime(2021, 12),
        );

        if (result != null) {
          setState(() {
            selectedDateTimeRange = result;
          });
        }
      },
      child: const Text('日期區間選擇器'),
    );

時間選取器

    var timePickButton = ElevatedButton(
      onPressed: () async {
        var result = await showTimePicker(
          context: context,
          initialTime: TimeOfDay.now(),
          initialEntryMode: TimePickerEntryMode.input,
        );

        if (result != null) {
          setState(() {
            selectedTimeOfDay = result;
          });
        }
      },
      child: const Text('時間選擇器'),
    );

客制化

在上述的使用是 material 設定的風格，如果我們自己想要定義不同的介面，那需要怎麼處理勒？

在上述提到的日期時間擇擇器大多具備Dialog彈窗的功能，這個在App的應用上還蠻常見的，例如對話功能(AlertDialog)、列表功能(SimpleDialog)。Flutter 本身已提供一個showDialog，可以讓我們使用彈窗的效果並定義彈窗想要的內容。

這邊我們先實作一個客制化介面，我這邊直接使用 Flutter 的 CalendarDatePicker 類別，這是一個簡易的日期選取控制並加上一個紅色確認按鈕。

class CustomDateTimePicker extends StatefulWidget {
  final DateTime initialDate;

  CustomDateTimePicker({required this.initialDate});

  @override
  _CustomDateTimePicker createState() => _CustomDateTimePicker();
}

class _CustomDateTimePicker extends State<CustomDateTimePicker> {
  late DateTime selectedDateTime;

  @override
  initState() {
    super.initState();
    selectedDateTime = this.widget.initialDate;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        CalendarDatePicker(
          initialDate: selectedDateTime,
          firstDate: DateTime(2000, 1, 1),
          lastDate: DateTime(2040, 12, 31),
          onDateChanged: (DateTime date) {
            setState(() {
              selectedDateTime = date;
            });
          },
        ),
        ElevatedButton(
          child: Text("OK"),
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
          ),
          onPressed: () {
            Navigator.of(context).pop(selectedDateTime);
          },
        )
      ],
    );
  }
}

並且新增一個函數用來呼叫showDialog並帶入剛剛新增的日期選擇組件。

  Future<DateTime> showCustomDateTimePickerDialog({
    required BuildContext context,
    required DateTime initialDate,
  }) async {
    return await showDialog(
      context: context,
      builder: (ctx) {
        return Dialog(child: CustomDateTimePicker(initialDate: initialDate));
      },
    );
  }

接下來我們就可以使用類似原本內建的方式觸發客制化日期選取器的彈窗效果。

    var customDateTimePickButton = ElevatedButton(
      onPressed: () async {
        var result = await showCustomDateTimePickerDialog(
          context: context,
          initialDate: selectedCustomDateTime,
        );

        setState(() {
          selectedCustomDateTime = result;
        });
      },
      child: const Text('客制化日期選擇器'),
    );

小結

練習成果

今日我們學習了時間日期選擇器的使用方式，也從如何客制化的章節認識到彈窗的功能，基礎的widget使用方式我們大概都曉得要如何使用了，接下來我們明天開始會開始進入較進階的內容。