datePicker 달력

DatePicker는 사용자가 날짜를 선택할 수 있게 해주는 Flutter의 Material 위젯이다.

showDatePicker() 함수를 사용하여 달력을 보여준다.

Flutter DateTime Picker는 쉽게 사용자가 지정할 수 있고 여러 언어로 날짜 및 시간 선택을 지원한다.

 

 

실행화면

 

날짜를 선택하는 코드

DateTime? pickedDate = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(),
                    firstDate: DateTime(1950),
                    //DateTime.now() - 오늘 전에는 선택못하게
                    lastDate: DateTime(2100));

                if (pickedDate != null) {
                  print(pickedDate); //pickDate 출력 형식 => 2021-03-10 00:00:00.000
                  String formattedDate =
                      DateFormat('yyyy-MM-dd').format(pickedDate);
                  print(
                      formattedDate); //intl 패키지를 사용하여 형식화된 날짜 출력 =>  2021-03-16
                  setState(() {
                    dateInput.text =
                        formattedDate; //출력 날짜를 TextField 값으로 설정합니다.
                  });
                }

 

전체 코드

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class datePickerTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _datePickerTest();
  }
}

class _datePickerTest extends State<datePickerTest> {
  TextEditingController dateInput = TextEditingController();

  @override
  void initState() {
    dateInput.text = ""; //set the initial value of text field
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("DatePicker Test"), backgroundColor: Colors.blue),
        body: Container(
            padding: EdgeInsets.all(15),
            height: MediaQuery.of(context).size.width / 3,
            child: Center(
                child: TextField(
              controller: dateInput,
              //TextField의 편집 컨트롤러
              readOnly: true,
              //true로 설정하면 사용자가 텍스트를 편집할 수 없습니다.
              onTap: () async {
                DateTime? pickedDate = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(),
                    firstDate: DateTime(1950),
                    //DateTime.now() - 오늘 전에는 선택못하게
                    lastDate: DateTime(2100));

                if (pickedDate != null) {
                  print(pickedDate); //pickDate 출력 형식 => 2021-03-10 00:00:00.000
                  String formattedDate =
                      DateFormat('yyyy-MM-dd').format(pickedDate);
                  print(
                      formattedDate); //intl 패키지를 사용하여 형식화된 날짜 출력 =>  2021-03-16
                  setState(() {
                    dateInput.text =
                        formattedDate; //출력 날짜를 TextField 값으로 설정합니다.
                  });
                } else {}
              },
            ))));
  }
}