[j Flutter] 캘린더 / 달력 추가하기 (calendar, datepicker)

캘린더를 추가해보자.

 

1. syncfunsion_flutter_datepicker 패키지를 pubspec.yaml에 추가해준다.

syncfusion_flutter_datepicker: ^18.4.31-beta

pub.dev/packages/syncfusion_flutter_datepicker

syncfusion_flutter_datepicker | Flutter Package

2. 버튼을 누르면 달력이 dialog형태로 나타나게 했다.

 

_selectDate(BuildContext context) {
    Widget okButton = FlatButton(
      child: Text("OK"),
      onPressed: () {
        Navigator.pop(context);
      },
    );

    AlertDialog alert = AlertDialog(
      title: Text("달력"),
      actions: [
        okButton,
      ],
      content: Container(
        width: size.width * 0.7,
        height: size.height * 0.8,
        child: SfDateRangePicker(
          onSelectionChanged: _onSelectionChanged,
          selectionMode: DateRangePickerSelectionMode.single,
          initialSelectedRange: PickerDateRange(
              DateTime.now().subtract(const Duration(days: 4)),
              DateTime.now().add(const Duration(days: 3))),
        ),
      ),
    );

    return showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }

 

***************** 실행화면 *******************

캘린더 실행화면