플러터(flutter) DatePicker 이용해 날짜 입력

DatePick는 날짜를 선택하는데 모바일 화면에서 가장 일반적인 방법입니다. 플러터 앱에서는 showDatePicker 메소드를 호출하는 것만으로 DatePicker를 사용이 가능해 편리하게 날짜 입력이 가능 합니다.

 

DatePicker 사용하기

DatePicker

DatePicker는 날짜를 선택하는 모달을 표시합니다.  만약 날짜가 필요없고 시간을 입력받고 싶다면 TimePicker를 이용할 수 있습니다. TimePicker와 DatePicker의 사용법은 비슷합니다. DatePicker의 경우 showDatePicker 메소드를 호출함으로 DatePicker 표시할 수 있고, TimePicker의 경우는 showTimePicker 를 호출 하면 됩니다.

---

코드를 살펴 보도록 하겠습니다.

// ignore_for_file: prefer_const_constructors

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

class DatePickerScreen extends StatefulWidget {
  const DatePickerScreen({Key? key}) : super(key: key);

  @override
  State<DatePickerScreen> createState() => _DatePickerScreenState();
}

class _DatePickerScreenState extends State<DatePickerScreen> {
  String _selectedDate = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DatePicker'),
      ),
      body: Container(
        padding: EdgeInsets.all(24.0),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(
                _selectedDate,
                style: TextStyle(fontSize: 24),
              ),
              IconButton(
                icon: Icon(Icons.date_range),
                onPressed: () => _selectDate(context),
              )
            ],
          ),
        ),
      ),
    );
  }

  Future _selectDate(BuildContext context) async {
    final DateTime? selected = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1900),
      lastDate: DateTime.now(),
    );
    if (selected != null) {
      setState(() {
        _selectedDate = (DateFormat.yMMMd()).format(selected);
      });
    }
  }
}

IconButton 클릭할 때 _selectDate메소드를 이용해 showDatePicker를 호출해 DatePicker를 표시하고 있습니다. showDatePicker 메소드는 비동기 메소드이기 때문에 _selectDate도 비동기 메소드로 만들어 주어야 합니다.

예제에서 사용한 showDatePicker의 매개변수로는 아래와 같습니다.

• context는 모달 표시를 위해 BuildContext를 전달해 주어야 합니다.
• initialDate는 처음에 표시되는 초기 날짜입니다.
• firstDate는 표시할 수 있는 최소 날짜입니다.
• lastDate는 표시할 수 있는 최대 날짜입니다.

initialDate는 firstDate와 lastDate의 범위내에 있어야 합니다.

 

예제 코드에서는 DateFormat을 사용하고 있으므르 intl 패키지를 임포트 해줘야 합니다. intl은 외부 패키지 이므로 pubspec.yaml에 종속성을 추가해서 패키지 인스톨을 해줘야 합니다.

 

 

여기까지 읽어주셔서 감사합니다.