[flutter] 플러터 DatePicker의 텍스트 입력 모드

08 Dec 2023

flutter

DatePicker를 텍스트 입력 모드로 설정하기

DatePicker를 텍스트 입력 모드로 사용하려면 먼저 TextEditingController를 사용하여 텍스트 필드를 관리해야 합니다. 그런 다음, 사용자가 텍스트 필드를 터치했을 때 DatePicker를 표시하도록 조치해야 합니다.

TextEditingController _textController = TextEditingController();
DateTime _selectedDate;

Future<void> _selectDate(BuildContext context) async {
  final DateTime picked = await showDatePicker(
    context: context,
    initialDate: _selectedDate ?? DateTime.now(),
    firstDate: DateTime(2015, 8),
    lastDate: DateTime(2101),
  );
  if (picked != null && picked != _selectedDate) {
    setState(() {
      _selectedDate = picked;
      _textController.text = DateFormat.yMd().format(picked);
    });
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextFormField(
          controller: _textController,
          decoration: InputDecoration(
            labelText: 'Select Date',
            suffixIcon: IconButton(
              icon: Icon(Icons.calendar_today),
              onPressed: () {
                _selectDate(context);
              }
            ),
          ),
          onTap: () {
            _selectDate(context);
          },
        ),
      ],
    ),
  );
}

위의 예시 코드는 DatePicker를 텍스트 입력 모드로 사용할 수 있도록 설정하는 방법을 보여줍니다. TextFormField의 controller 속성을 사용하여 텍스트 필드를 관리하고, suffixIcon으로 IconButton을 추가하여 DatePicker를 터치할 수 있는 버튼을 만들었습니다.

텍스트 입력 모드로 DatePicker를 사용하면 앱의 사용자가 텍스트 필드를 통해 편리하게 날짜를 선택할 수 있습니다. 이를 통해 사용자 경험을 개선하고, 앱의 유용성을 향상시킬 수 있습니다.