[flutter] 플러터 DatePicker로 날짜 선택하기

08 Dec 2023

flutter

플러터를 사용하여 DatePicker 위젯을 통해 사용자가 날짜를 선택할 수 있습니다. 이는 앱에서 날짜 관련 정보를 입력 또는 표시하는 데 유용합니다. 이번 게시물에서는 플러터 앱에서 DatePicker를 사용하는 방법에 대해 알아보겠습니다.

1. DatePicker 위젯 추가

DatePicker를 사용하기 위해 먼저 flutter/material.dart 패키지를 import 한 후, showDatePicker 함수를 사용하여 DatePicker를 화면에 표시할 수 있습니다.

import 'package:flutter/material.dart';

class MyDatePicker extends StatefulWidget {
  @override
  _MyDatePickerState createState() => _MyDatePickerState();
}

class _MyDatePickerState extends State<MyDatePicker> {
  DateTime _selectedDate = DateTime.now();

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text("${_selectedDate.toLocal()}".split(' ')[0]),
        SizedBox(height: 20.0,),
        IconButton(
          icon: Icon(Icons.calendar_today),
          onPressed: () => _selectDate(context),
        ),
      ],
    );
  }
}

위 예제 코드에서는 _selectDate 함수를 통해 showDatePicker 함수를 호출하여 DatePicker를 표시하고 선택된 날짜를 화면에 표시하고, 선택된 날짜를 _selectedDate에 저장하고 업데이트하는 동작을 수행합니다.

2. DatePicker 사용

위젯을 화면에 추가하여 DatePicker를 사용할 수 있습니다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('DatePicker Example'),
    ),
    body: Center(
      child: MyDatePicker(),
    ),
  );
}

이제 앱을 실행하고 아이콘을 탭하여 DatePicker를 열고 원하는 날짜를 선택할 수 있습니다.

위와 같은 방법으로 플러터에서 DatePicker를 사용할 수 있습니다. 사용자가 특정 날짜를 선택하여 해당 날짜와 관련된 작업을 수행하는 다양한 앱에서 유용하게 활용될 수 있습니다.

참고 자료

Flutter 공식 문서

이상으로 플러터를 사용하여 DatePicker를 사용하는 방법에 대해 알아보았습니다. 부가적으로 showTimePicker 함수를 사용하여 시간을 선택하는 방법도 유사하게 적용할 수 있습니다.