[flutter] 플러터 스택드 위젯에서 캘린더 추가하기

15 Dec 2023

flutter

플러터 앱에서 캘린더를 스택드(Stacked) 위젯에 추가하는 방법을 알아보겠습니다.

1. 캘린더 패키지 추가하기

먼저, 플러터 프로젝트의 pubspec.yaml 파일에 캘린더를 사용할 수 있는 패키지를 추가해야 합니다. 예를 들어, table_calendar 패키지를 추가하려면 아래와 같이 pubspec.yaml 파일에 패키지를 추가합니다:

dependencies:
  table_calendar: ^3.0.1

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

2. 캘린더를 포함한 위젯 생성하기

다음으로, 스택드 위젯에 캘린더를 추가할 새로운 위젯을 생성합니다.

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

class StackedCalendar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 다른 위젯들을 위치시킨 후, 캘린더를 추가
        Positioned(
          top: 20.0,
          left: 0.0,
          right: 0.0,
          child: TableCalendar(
            // 캘린더 설정
          ),
        ),
        // 다른 위젯들과 함께 캘린더가 나타나도록 조절
      ],
    );
  }
}

위 코드에서 StackedCalendar는 스택드 위젯에 캘린더를 추가하는 사용자 정의 위젯입니다. TableCalendar 위젯을 사용해 원하는 설정을 추가할 수 있습니다.

3. 캘린더 위젯 추가 및 사용하기

이제, 해당 캘린더를 포함한 StackedCalendar 위젯을 사용하고 싶은 화면에 추가하실 수 있습니다.

import 'package:flutter/material.dart';
import 'stacked_calendar.dart'; // 앞서 작성한 StackedCalendar 위젯을 불러오기

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('스택드 캘린더'),
      ),
      body: Center(
        child: StackedCalendar(), // StackedCalendar 위젯 추가
      ),
    );
  }
}

이제 HomeScreen 위젯에 StackedCalendar를 추가했으므로, 해당 화면에 캘린더가 나타날 것입니다.

이제 플러터 앱에서 스택드 위젯에 캘린더를 추가하는 방법을 알아보았습니다. 위에서 제공한 예시는 개념을 이해하고 적용하기 위한 기본적인 방법을 안내한 것이므로, 필요에 따라 코드를 수정하여 다양한 스타일과 기능을 추가할 수 있습니다.