SfDateRangePicker()

다중 날짜 선택기는 flutter에서 기본으로 제공 되는 위젯이 있지만 디자인이 너무 구글스럽고 커스텀을 해서 사용하는데 제약이 많다.

syncfusion에서 개발한 라이브러리를 사용 할 예정이다

  syncfusion_flutter_datepicker: ^19.3.46

원하는 대로 커스텀을 사용할 수 있어서 사용하기 좋은 라이브러리이다

Container(
                      width: width * 0.9,
                      height: isExpandable ? 300 : 10,
                      decoration: const BoxDecoration(
                          borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(18),
                              bottomRight: Radius.circular(18)),
                          color: Colors.teal),
                      child: SfDateRangePicker(
                        minDate: DateTime(2000),
                        maxDate: DateTime(2100),
                        onSelectionChanged:
                            (DateRangePickerSelectionChangedArgs args) {
                          setState(() {
                            if (args.value is PickerDateRange) {
                              start = args.value.startDate
                                  .toString()
                                  .substring(0, 10);

                              end = args.value.endDate != null
                                  ? args.value.endDate
                                      .toString()
                                      .substring(0, 10)
                                  : start;
                            }
                          });
                        },
                        selectionMode: DateRangePickerSelectionMode.range,
                        monthCellStyle: const DateRangePickerMonthCellStyle(
                          textStyle: TextStyle(color: Colors.amber),
                          todayTextStyle: TextStyle(color: Colors.amber),
                        ),
                        startRangeSelectionColor: Colors.white,
                        endRangeSelectionColor: Colors.white,
                        rangeSelectionColor: Colors.white,
                        selectionTextStyle:
                            const TextStyle(color: Colors.amber),
                        todayHighlightColor: Colors.amber,
                        selectionColor: Colors.deepPurple,
                        // backgroundColor: Colors.deepPurple,
                        allowViewNavigation: false,
                        // view:  DateRangePickerView.month,
                        headerStyle: const DateRangePickerHeaderStyle(
                            textStyle: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.amber,
                                fontSize: 18,
                                fontStyle: FontStyle.italic)),
                        monthViewSettings:
                            const DateRangePickerMonthViewSettings(
                          enableSwipeSelection: false,
                        ),
                      ),
                    ),

Example