[flutter] 플러터 DatePicker를 사용한 플랫폼 별 날짜 선택

08 Dec 2023

flutter

날짜 선택은 모바일 애플리케이션에서 매우 일반적인 기능 중 하나입니다. Flutter를 사용하여 안드로이드 및 iOS에서 DatePicker를 구현하는 방법을 알아보겠습니다.

안드로이드에서 DatePicker 사용하기

안드로이드에서 DatePicker를 사용하려면 android.app.DatePickerDialog를 이용하여 구현할 수 있습니다. 아래는 플러터에서 안드로이드 DatePicker를 호출하는 예제 코드입니다.

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

class AndroidDatePickerDemo extends StatefulWidget {
  @override
  _AndroidDatePickerDemoState createState() => _AndroidDatePickerDemoState();
}

class _AndroidDatePickerDemoState extends State<AndroidDatePickerDemo> {
  final _dateController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Android DatePicker'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Row(
          children: [
            Expanded(
              child: TextFormField(
                controller: _dateController,
                keyboardType: TextInputType.datetime,
                decoration: InputDecoration(
                  labelText: 'Select Date',
                  hintText: 'Tap to open date picker',
                ),
                onTap: () {
                  _selectDate(context);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

iOS에서 DatePicker 사용하기

iOS에서는 CupertinoDatePicker 위젯을 사용하여 DatePicker를 구현할 수 있습니다. 아래는 플러터에서 iOS DatePicker를 호출하는 예제 코드입니다.

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

class IOSDatePickerDemo extends StatefulWidget {
  @override
  _IOSDatePickerDemoState createState() => _IOSDatePickerDemoState();
}

class _IOSDatePickerDemoState extends State<IOSDatePickerDemo> {
  DateTime _selectedDate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('iOS DatePicker'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Row(
          children: [
            Expanded(
              child: GestureDetector(
                onTap: () {
                  showModalBottomSheet(
                    context: context,
                    builder: (BuildContext builder) {
                      return Container(
                        height: MediaQuery.of(context).copyWith().size.height / 3,
                        child: CupertinoDatePicker(
                          mode: CupertinoDatePickerMode.date,
                          initialDateTime: _selectedDate,
                          onDateTimeChanged: (DateTime newDate) {
                            setState(() {
                              _selectedDate = newDate;
                            });
                          },
                        ),
                      );
                    },
                  );
                },
                child: Text('Selected Date: $_selectedDate'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

안드로이드 및 iOS에서 DatePicker를 사용하는 방법을 살펴보았습니다. 각 플랫폼에 맞게 DatePicker를 구현하여 사용자가 각 플랫폼에서 일반적으로 기대하는 사용자 경험을 제공할 수 있습니다.

안드로이드에서 DatePicker 사용하기

iOS에서 DatePicker 사용하기

참고 자료