관리 메뉴

피터의 개발이야기

[flutter] Cupertino DatePicker 설정, min max date 지정 본문

Programming/Flutter

[flutter] Cupertino DatePicker 설정, min max date 지정

기록하는 백앤드개발자 2024. 2. 20. 16:19
반응형

ㅁ 들어가며

ㅇ  코드팩토리의 플러터 프로그래밍 책을 보며 실습 중 [flutter] 만난 지 며칠 U&I 내용을 정리하면서 Cupertino DatePicker를 설정하고 최소, 최대 날짜를 지정하는 방법을 정리하였다.

 

ㅁ min max 날짜 지정방법

import 'package:intl/intl.dart'; // Dateformat 용
.............

  // 하트 기능 생성
  void onHeartPressed(){
    // 쿠퍼티노 다이어로그 생성자
    showCupertinoDialog(

      context: context,
      builder: (BuildContext context){
        ////////////////////////////////
        // min max 날짜 지정- 초기 선택 날짜
        final initDate =
          DateFormat('yyyy-MM-dd').parse('2014-11-11');
        ///////////////////////////////
        
        // 날짜 다이얼로그 정렬
        return Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            color: Colors.white, // 흰색 배경
            height: 300,
            child: CupertinoDatePicker(
            
              ////////////////////
              // min max 날짜 지정
              // https://api.flutter.dev/flutter/cupertino/CupertinoDatePicker/maximumDate.html
              maximumYear: DateTime.now().year,
              maximumDate: DateTime.now(),
              minimumYear: 2000,
              initialDateTime: initDate,
              ////////////////////
              
              // 시간 빼고 날짜만 선택
              mode: CupertinoDatePickerMode.date,
              // 선택한 날짜 데이터 받아 firstDay에 반경하기
              onDateTimeChanged: (DateTime date){
                setState(() {
                  firstDay = date;
                });
              },
            ),
          ),
        );
      },
      barrierDismissible: true, // 외부 클릭 시 닫음
    );
  }
.............

 

 ㅇ Cupertino DatePicker 설정하는 소스이다.

 ㅇ 강조된 minimum~ maximum~ 옵션값을 지정하면 날짜 선택의 폭을 지정할 수 있다. 

 

ㅁ 함께 보면 좋은 사이트

https://api.flutter.dev/flutter/cupertino/CupertinoDatePicker-class.html

 ㅇ Cupertino DatePicker Sample 소스를 확인하고 기능을 테스트 할 수 있는 곳

반응형
Comments