Flutter DatePicker 사용하기.

Flutter에서 DatePicker를 사용하여 날짜 선택하는 팝업 만들기.

팝업창 띄워주는 메소드

showDialog(context: context, builder: builder)		// (구글) 안드로이드에서 흔히 보는 팝업
showCupertinoDialog(context: context, builder: builder) // (애플) iOS에서 흔히 보는 팝업

showCupertinoDialog(
  context: context,
  barrierDismissible: true,  // 팝업 바깥쪽 배경을 누르면 팝업창이 사라짐 (기본은 false)
  builder: (BuildContext context){
    return Align(   // 정렬을 해주지 않으면 높이나 너비를 정의하더라도 최대 사이즈로 보여지게 됨
      alignment: Alignment.center,
      child: Container(
        color: Colors.white,
        height: 300.0,
        
      ),
    );
  },
);

 

여기에 DatePicker 입력 ( 아이폰 DatePicker 사용 )

showCupertinoDialog(
  context: context,
  barrierDismissible: true,
  // 팝업 바깥쪽 배경을 누르면 팝업창이 사라짐 (기본은 false)
  builder: (BuildContext context) {
    return Align( // 정렬을 해주지 않으면 높이나 너비를 정의하더라도 최대 사이즈로 보여지게 됨
      alignment: Alignment.center,
      child: Container(
        color: Colors.white,
        height: 300.0,
        child: CupertinoDatePicker(		// 아이폰 DatePicker
          onDateTimeChanged: (DateTime date){	// 날짜를 선택 할 때마다 콜백 받는 부분
            print(date);
          },
        ),
      ),
    );
  },
);

이런식으로 출력

 

DatePicker 커스텀하기 예제

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.date,		// 시간은 제외하고 연도, 월, 일 만 나오게
  onDateTimeChanged: (DateTime date){
    print(date);
  },
  dateOrder: DatePickerDateOrder.ymd,		// 순서를 연-월-일 순으로 니오게 하기 (기본은 월 일 연도 순) 
),