[flutter] 플러터 DatePicker를 이용한 이벤트 예약

08 Dec 2023

flutter

플러터를 사용하여 모바일 앱을 개발할 때, DatePicker를 이용하여 이벤트를 예약하는 기능을 구현하는 것은 중요한 부분입니다. 사용자가 DatePicker를 터치하여 날짜와 시간을 선택하고, 해당 날짜 및 시간에 이벤트를 예약할 수 있도록 만드는 것이 목표입니다.

DatePicker 위젯 추가

먼저, 앱에 DatePicker 위젯을 추가해야 합니다. 이를 위해 다음과 같이 코드를 작성합니다.

import 'package:flutter/material.dart';

class EventReservationScreen extends StatefulWidget {
  @override
  _EventReservationScreenState createState() => _EventReservationScreenState();
}

class _EventReservationScreenState extends State<EventReservationScreen> {
  DateTime _selectedDate;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('이벤트 예약'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _selectedDate == null
                  ? '이벤트 날짜를 선택하세요.'
                  : '예약 날짜: ${_selectedDate.year}-${_selectedDate.month}-${_selectedDate.day}',
            ),
            RaisedButton(
              onPressed: () => _selectDate(context),
              child: Text('날짜 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 EventReservationScreen 위젯에 DatePicker를 추가하고, showDatePicker 함수를 사용하여 사용자가 날짜를 선택할 수 있도록 합니다.

날짜 및 시간 설정

DatePicker를 사용하여 날짜를 선택한 후에는 시간도 추가로 설정할 수 있도록 하는 기능을 구현할 수 있습니다. 이를 위해 시간을 선택할 수 있는 TimePicker 위젯을 추가하고, 사용자가 날짜와 시간을 모두 선택하도록 하는 작업이 필요합니다.

Future<void> _selectDate(BuildContext context) async {
  final DateTime picked = await showDatePicker(
    context: context,
    initialDate: _selectedDate != null ? _selectedDate : DateTime.now(),
    firstDate: DateTime.now(),
    lastDate: DateTime(2101),
  );
  if (picked != null) {
    final TimeOfDay pickedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (pickedTime != null) {
      final DateTime selectedDateTime = DateTime(
        picked.year,
        picked.month,
        picked.day,
        pickedTime.hour,
        pickedTime.minute,
      );
      setState(() {
        _selectedDate = selectedDateTime;
      });
    }
  }
}

위 코드에서는 showTimePicker 함수를 사용하여 사용자가 시간을 선택할 수 있도록 합니다. 선택된 날짜와 시간은 DateTime 형식으로 합쳐져 _selectedDate에 저장됩니다.

이벤트 예약 저장

마지막으로, 사용자가 선택한 날짜와 시간을 사용하여 이벤트 예약을 저장하는 부분을 구현해야 합니다. 이 부분은 데이터베이스나 저장소에 예약 정보를 저장하고, 필요한 경우 푸시 알림을 통해 사용자에게 알림을 전송하는 등의 작업을 수행할 수 있습니다.

DatePicker를 이용한 이벤트 예약 기능을 구현하는 것은 플러터 앱의 핵심 기능 중 하나이며, 사용자의 편의성과 경험을 향상시킬 수 있는 부분입니다.

참고 자료

위와 같이, 플러터를 사용하여 DatePicker를 이용한 이벤트 예약 기능을 구현하는 방법에 대해 소개했습니다. 사용자가 앱을 사용할 때 날짜와 시간을 예약할 수 있는 기능은 매우 중요하므로, 이를 구현하는 데 있어서 사용자 친화적인 디자인과 신뢰성 있게 동작하는 부분을 고려해야 합니다.

목차

DatePicker 위젯 추가

날짜 및 시간 설정

이벤트 예약 저장

참고 자료