Flutter의 날짜 선택기(Date Picker) 사용법

Flutter에서 날짜 선택기(Date Picker)는 사용자가 날짜를 선택할 수 있도록 하는 인터페이스 요소입니다. 날짜 선택기는 주로 일정 관리, 예약 시스템 등 다양한 애플리케이션에서 사용됩니다. Flutter는 간단하고 직관적인 날짜 선택기를 제공하여 개발자가 쉽게 구현할 수 있도록 합니다. 이번 글에서는 Flutter의 showDatePicker 함수와 관련 위젯을 사용하여 날짜 선택기를 구현하는 방법에 대해 자세히 살펴보겠습니다.

1. 기본 날짜 선택기 사용법

기본 날짜 선택기를 표시하려면 showDatePicker 함수를 사용합니다. 이 함수는 비동기적으로 작동하며, 사용자가 날짜를 선택하면 해당 날짜를 반환합니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Date Picker Demo')),
        body: DatePickerDemo(),
      ),
    );
  }
}

class DatePickerDemo extends StatefulWidget {
  @override
  _DatePickerDemoState createState() => _DatePickerDemoState();
}

class _DatePickerDemoState extends State<DatePickerDemo> {
  DateTime? _selectedDate;

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            _selectedDate == null
                ? 'No date selected!'
                : 'Selected Date: ${_selectedDate!.toLocal()}'.split(' ')[0],
          ),
          SizedBox(height: 20.0),
          ElevatedButton(
            onPressed: () => _selectDate(context),
            child: Text('Select date'),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 사용자가 버튼을 눌러 날짜 선택기를 열고, 선택한 날짜를 텍스트 위젯에 표시하는 예제입니다. showDatePicker 함수는 선택된 날짜를 반환하며, setState를 사용하여 상태를 업데이트합니다.

2. 초기 날짜 설정

날짜 선택기를 열 때 기본으로 선택된 날짜를 설정하려면 initialDate 속성을 사용합니다. 이 속성은 선택기에서 처음 표시될 날짜를 지정합니다.

 

initialDate: DateTime(2022, 1, 1),

 

위 코드는 초기 날짜를 2022년 1월 1일로 설정합니다.

3. 날짜 범위 제한

사용자가 선택할 수 있는 날짜의 범위를 제한하려면 firstDate와 lastDate 속성을 사용합니다.

 

firstDate: DateTime(2000),
lastDate: DateTime(2101),

 

위 코드는 사용자가 2000년부터 2101년 사이의 날짜만 선택할 수 있도록 합니다.

 

반응형

 

4. 날짜 선택기의 테마 변경

날짜 선택기의 테마를 변경하려면 Theme 위젯을 사용하여 테마 데이터를 설정할 수 있습니다.

 

Future<void> _selectDate(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2101),
    builder: (BuildContext context, Widget? child) {
      return Theme(
        data: ThemeData.light().copyWith(
          colorScheme: ColorScheme.light(
            primary: Colors.purple,
            onPrimary: Colors.white,
            surface: Colors.blue,
            onSurface: Colors.black,
          ),
          dialogBackgroundColor: Colors.white,
        ),
        child: child!,
      );
    },
  );
  if (picked != null && picked != _selectedDate)
    setState(() {
      _selectedDate = picked;
    });
}

 

위 코드는 날짜 선택기의 테마 색상을 변경하는 예제입니다. primary, onPrimary, surface, onSurface 등의 색상을 설정하여 날짜 선택기의 외관을 커스터마이징합니다.

5. 날짜 형식 변경

선택된 날짜를 원하는 형식으로 표시하려면 DateFormat을 사용합니다. intl 패키지를 추가하여 날짜 형식을 손쉽게 변경할 수 있습니다.

 

import 'package:intl/intl.dart';

String formattedDate = DateFormat('yyyy-MM-dd').format(_selectedDate!);

 

위 코드는 선택된 날짜를 yyyy-MM-dd 형식으로 변환합니다.

6. 날짜 선택기와 텍스트 필드 통합

날짜 선택기를 텍스트 필드와 통합하여 사용자가 텍스트 필드를 클릭하면 날짜 선택기가 열리도록 할 수 있습니다.

 

class DatePickerDemo extends StatefulWidget {
  @override
  _DatePickerDemoState createState() => _DatePickerDemoState();
}

class _DatePickerDemoState extends State<DatePickerDemo> {
  TextEditingController _controller = TextEditingController();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2101),
    );
    if (picked != null) {
      setState(() {
        _controller.text = DateFormat('yyyy-MM-dd').format(picked);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextField(
        controller: _controller,
        decoration: InputDecoration(
          icon: Icon(Icons.calendar_today),
          labelText: 'Enter Date',
        ),
        readOnly: true,
        onTap: () => _selectDate(context),
      ),
    );
  }
}

 

위 코드는 텍스트 필드를 클릭하면 날짜 선택기가 열리고, 선택된 날짜가 텍스트 필드에 표시됩니다.

결론

showDatePicker 함수는 Flutter 애플리케이션에서 사용자가 날짜를 선택할 수 있도록 하는 매우 유용한 도구입니다. 기본 사용법부터 초기 날짜 설정, 날짜 범위 제한, 테마 변경, 날짜 형식 변경, 텍스트 필드와 통합 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. 날짜 선택기를 적절히 활용하여 직관적이고 효율적인 사용자 인터페이스를 제공하는 애플리케이션을 만들어보세요.