Part1:今日目標

1.程式碼實作

Part2:今日內容

1.程式碼實作: Date_Range_Picker_Widget.dart

這份 Dart 程式碼是一個 Flutter 應用程式中的自定義 widget，它提供了日期範圍選擇的功能。以下是這份程式碼的主要架構和功能簡介:

(1)DateRangePickerWidget Class

class DateRangePickerWidget extends StatefulWidget {  // 一個自定義的 StatefulWidget，表示: 可以被建立和管理狀態的 widget

  // 一個回調函式（Callback Function）: 用於通知使用者選擇了日期範圍
  // DateTime? 型別: 即可以是 DateTime 物件，也可以是 null。
  final Function(DateTime? startDate, DateTime? endDate) onDateRangeSelected;

  // 建立一個建構函式(constructor)，接受一個必要的參數 onDateRangeSelected: 用於初始化DateRangePickerWidget 的實例
  // 在建立這個 widget 的實例時，需要提供一個有效的回調函式(onDateRangeSelected)，用來處理選擇的日期範圍
  // DateRangePickerWidget：這是建構函式的名稱，它與類別的名稱相同，用來建立 DateRangePickerWidget 的實例
  // this.onDateRangeSelected：這部分表示在建立物件實例時會將提供的 onDateRangeSelected 參數的值賦給類別內的對應成員變數 onDateRangeSelected。這是一種快速將傳入的參數值存儲到類別內部的成員變數的方式
  DateRangePickerWidget({required this.onDateRangeSelected});

  // 這是覆寫父類的方法，用來建立並返回 _DateRangePickerWidgetState 的實例
  // _DateRangePickerWidgetState 是該 widget 的狀態類別，它將包含實際的 UI 呈現和狀態管理邏輯
  @override
  _DateRangePickerWidgetState createState() => _DateRangePickerWidgetState();
}

• 定義了一個自定義 Flutter widget，名為 DateRangePickerWidget，它是一個有狀態的(StatefulWidget)元件。
• 這個 widget 接受一個回調函式 onDateRangeSelected 作為必要的參數，當用戶選擇了日期範圍時，該回調函式將被呼叫並回傳所選擇的起始日期和結束日期。
• _DateRangePickerWidgetState 類別用於實現 DateRangePickerWidget 的實際外觀和交互邏輯。

(2)_DateRangePickerWidgetState Class

class _DateRangePickerWidgetState extends State<DateRangePickerWidget> {
  // _startDate 和 _endDate：這兩個成員變數分別存儲選擇的起始日期和結束日期，初值都是 null
  DateTime? _startDate;
  DateTime? _endDate;

  // 這個方法用於處理選擇"開始日期"的動作
  void _pickStartDate() async {
    // 使用 showDatePicker 函式來顯示日期選擇器，讓使用者選擇日期
    final DateTime? date = await showDatePicker(  // date: 即為使用者選的日期
      context: context,
      initialDate: _startDate ?? DateTime.now(),
      firstDate: DateTime(DateTime.now().year - 10),
      lastDate: DateTime(DateTime.now().year + 10),
    );

    // 如果使用者選擇了日期，則將 _startDate 更新為所選的日期
    // 並呼叫 widget.onDateRangeSelected(_startDate, _endDate) 來觸發使用者提供的回調函式
    if (date != null) {
      setState(() {
        _startDate = date;
      });
      widget.onDateRangeSelected(_startDate, _endDate);  // 注意: 應該結束日期選好，才重新畫折線圖
    }
  }

  // 這個方法用於處理選擇"結束日期"的動作
  void _pickEndDate() async {
    final DateTime? date = await showDatePicker(
      context: context,
      initialDate: _endDate ?? DateTime.now(),
      firstDate: DateTime(DateTime.now().year - 10),
      lastDate: DateTime(DateTime.now().year + 10),
    );

    if (date != null) {
      setState(() {
        _endDate = date;
      });
      widget.onDateRangeSelected(_startDate, _endDate);
    }
  }

  // 這個方法用於建構這個 widget 的 UI
  @override
  Widget build(BuildContext context) {
    // 它包含了兩個按鈕，一個用於選擇開始日期，另一個用於選擇結束日期
    // 在按鈕下方，還有兩個文字顯示目前選擇的開始日期和結束日期
    // 每當 _startDate 或 _endDate 更新時，這個 UI 將自動重新繪製以顯示最新的日期
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(  // 這邊應該要回傳個東西，才能去更新折線圖的日期 (像練習時用到的輸入框，輸入後能進資料庫搜尋，同理這邊輸入後，應該可以傳到圖表來篩選範圍)
              onPressed: _pickStartDate,
              child: Text("選擇開始日期"),
            ),
            ElevatedButton(
              onPressed: _pickEndDate,
              child: Text("選擇結束日期"),
            ),
          ],
        ),
        Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text(
                  "開始日期: ${_startDate?.toLocal().toString().split(' ')[0] ?? '未選擇'}"),
              Text(
                  "結束日期: ${_endDate?.toLocal().toString().split(' ')[0] ?? '未選擇'}"),
            ])
      ],
    );
  }
}

• _DateRangePickerWidgetState 是 DateRangePickerWidget 的狀態管理器，它用於存儲和操作與該 widget 相關的狀態。
• 包含 _startDate 和 _endDate 兩個成員變數，用於存儲選擇的起始日期和結束日期，初值為 null。
• 提供 _pickStartDate() 和 _pickEndDate() 方法，分別用於處理選擇開始日期和結束日期的操作。
• 在選擇日期後，使用 showDatePicker 顯示日期選擇器，並在確定日期後使用 setState 來更新 _startDate 或 _endDate，同時呼叫 widget.onDateRangeSelected 觸發用戶提供的回調函式。
• build 方法用於建構 DateRangePickerWidget 的用戶界面，包括兩個按鈕（選擇開始日期和選擇結束日期），以及顯示選擇的日期範圍。

如果你不從共事的每個人身上偷學一些什麼，就真的太蠢了 - 湯姆漢克斯
Steal from everybody you worked with - Tom Hanks
榮登自己近期最喜歡的一段話，好的要好好學，壞的也要借鏡提醒自己