[flutter] 플러터 DatePicker로 반복 일정 생성하기

08 Dec 2023

flutter

플러터에서 DatePicker를 사용하여 반복되는 일정을 생성하는 방법에 대해 알아보겠습니다. 이 기능은 앱에서 사용자가 특정 일자에 대해 반복 일정을 설정하고 표시할 수 있는 유용한 기능입니다.

DatePicker 구성

DatePicker를 구성하기 전에 먼저 flutter/material.dart 패키지를 import 해야 합니다. 그리고 StatefulWidget을 이용하여 DatePicker를 생성합니다.

import 'package:flutter/material.dart';

class RepeatDatePicker extends StatefulWidget {
  @override
  _RepeatDatePickerState createState() => _RepeatDatePickerState();
}

class _RepeatDatePickerState extends State<RepeatDatePicker> {
  @override
  Widget build(BuildContext context) {
    // DatePicker code
  }
}

DatePicker 구현

DatePicker를 구현하기 위해서는 showDatePicker 함수를 사용하여 사용자에게 날짜를 선택할 수 있는 화면을 제공해야 합니다.

DateTime _selectedDate = DateTime.now();

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

showDatePicker 함수를 이용하여 사용자가 날짜를 선택하면, 선택한 날짜를 setState 함수를 이용하여 업데이트합니다.

반복 일정 생성

반복 일정을 생성하기 위해 선택한 날짜에 대해 반복 주기를 설정할 수 있도록 추가적인 컨트롤을 제공해야 합니다.

String _repeatPeriod = 'Every Week';

void _setRepeatPeriod(String newPeriod) {
  setState(() {
    _repeatPeriod = newPeriod;
  });
}

// Repeat period selection widget code

반복 주기를 설정하는 위젯을 추가하여 사용자가 주기를 선택할 수 있도록 합니다.

결과

위의 구현을 통해 사용자는 DatePicker를 이용하여 특정 일자를 선택하고 반복 주기를 설정하여 반복 일정을 생성할 수 있습니다.

이것으로 플러터 DatePicker로 반복 일정을 생성하는 방법에 대해 알아보았습니다. 플러터를 사용하여 종종하는 일정의 선택과 표시를 할 수 있게 됨으로써 더 풍부한 사용자 경험을 제공할 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고하세요.