[flutter] 플러터 DatePicker에 특정 날짜 표시 및 선택 제한하기

08 Dec 2023

flutter

플러터 앱에서 DatePicker를 사용하여 Dialog 형식으로 날짜를 선택할 때, 특정 날짜를 미리 선택되어 있도록 만들고, 선택 가능한 날짜 범위를 제한하고 싶을 때가 있습니다. 이러한 기능을 구현하는 방법에 대해 알아보겠습니다.

DatePicker에 특정 날짜 표시하기

DatePicker의 initialDate 속성을 사용하면 날짜를 미리 선택된 상태로 표시할 수 있습니다. 아래의 예제 코드는 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(2021),
      lastDate: DateTime(2022),
    );
    if (picked != null && picked != _selectedDate)
      setState(() {
        _selectedDate = picked;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DatePicker 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("${_selectedDate.toLocal()}".split(' ')[0]),
            SizedBox(
              height: 20.0,
            ),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('날짜 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyDatePicker(),
  ));
}

위의 예제에서 initialDate에 현재 날짜가 사용되었으나, 여기에는 다른 날짜를 사용하여 특정 날짜로 설정할 수 있습니다.

DatePicker에서 선택 가능한 날짜 범위 제한하기

DatePicker의 firstDate와 lastDate 속성을 사용하여 선택 가능한 날짜의 범위를 제한할 수 있습니다.

위의 예제 코드에서 firstDate와 lastDate로 사용된 것처럼, 이 두 속성을 사용하여 DatePicker에서 선택 가능한 날짜를 제한할 수 있습니다.

이제, 위의 예제를 참고하여 플러터에서 DatePicker에 특정 날짜를 표시하고 선택 가능한 날짜 범위를 제한하는 방법에 대해 알아 보았습니다.

참조:

Flutter 공식 문서 - DatePicker

Keyword: flutter, datepicker, 특정 날짜, 선택 제한