[flutter] 플러터에서 훅(hook)을 이용하여 캘린더 기능 구현하기

14 Dec 2023

flutter

1. `flutter_hooks` 라이브러리 추가

우선, pubspec.yaml 파일에 flutter_hooks 라이브러리를 추가합니다.

dependencies:
  flutter_hooks: ^0.18.0

이후, 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 다운로드 받습니다.

2. 캘린더 위젯 구현

이제, 훅(Hook)을 이용하여 캘린더 위젯을 구현할 수 있습니다. 먼저, useState 훅을 사용하여 캘린더의 현재 날짜를 상태로 관리합니다.

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

Widget CalendarWidget() {
  var currentDate = useState<DateTime>(DateTime.now());

  return Container(
    child: Column(
      children: [
        Text(
          'Selected Date: ${currentDate.value}',
        ),
        ElevatedButton(
          onPressed: () {
            showDatePicker(
              context: context,
              initialDate: currentDate.value,
              firstDate: DateTime(2000),
              lastDate: DateTime(2050),
            ).then((DateTime? pickedDate) {
              if (pickedDate != null && pickedDate != currentDate.value) {
                currentDate.value = pickedDate;
              }
            });
          },
          child: Text('Select Date'),
        ),
      ],
    ),
  );
}

위 코드에서 useState 훅을 사용하여 currentDate를 선언하고, 이 값을 통해 선택한 날짜를 관리합니다. 또한, ElevatedButton을 통해 사용자가 날짜를 선택할 수 있도록 합니다.

이제 CalendarWidget을 화면에 추가하면, 훅을 이용하여 캘린더를 구현할 수 있습니다.

플러터에서 훅을 이용하여 캘린더를 구현하는 방법에 대해 간략히 살펴보았습니다. 여기서 사용된 코드는 실제 앱에 맞게 수정하여 사용할 수 있습니다.

1. flutter_hooks 라이브러리 추가

2. 캘린더 위젯 구현

1. `flutter_hooks` 라이브러리 추가