[flutter] Card 위젯을 이용한 캘린더 화면 구성하기

12 Dec 2023

flutter

이번에는 flutter 앱에서 Card 위젯을 이용하여 캘린더 화면을 만드는 방법에 대해 알아보겠습니다. Card 위젯은 정보를 담은 겹친 패널을 보여주는 데 사용되며, 간편하게 사용자에게 정보를 제공할 수 있습니다.

1. 필요한 패키지 추가하기

우선, 캘린더를 구현하기 위해 필요한 패키지를 추가해야 합니다. table_calendar 패키지는 캘린더를 손쉽게 만들 수 있도록 도와줍니다. table_calendar 패키지는 여기에서 확인할 수 있습니다.

dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.0.2

2. Card 위젯을 이용한 캘린더 화면 구성하기

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyCalendar(),
    );
  }
}

class MyCalendar extends StatefulWidget {
  @override
  _MyCalendarState createState() => _MyCalendarState();
}

class _MyCalendarState extends State<MyCalendar> {
  CalendarController _calendarController;

  @override
  void initState() {
    super.initState();
    _calendarController = CalendarController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('캘린더'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Card(
          elevation: 4,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: TableCalendar(
            calendarController: _calendarController,
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 table_calendar 패키지를 사용하여 간단한 캘린더 화면을 만들었습니다. Card 위젯을 사용하여 캘린더를 감싸며, TableCalendar 위젯을 사용하여 실제 캘린더를 표시했습니다.

결론

Card 위젯을 이용하여 캘린더 화면을 만들었습니다. 이를 통해 사용자에게 시각적으로 보기 좋은 캘린더 화면을 제공할 수 있습니다. 추가적으로 필요한 기능을 추가하거나 디자인을 변경하여 원하는 캘린더 화면을 만들어보세요.