[flutter] 플러터 Column을 사용한 캘린더 구현하기

20 Dec 2023

flutter

플러터는 다양한 레이아웃을 구현할 수 있는 유연한 기능을 제공합니다. 이번에는 Column을 사용하여 간단한 캘린더를 구현해 보겠습니다.

Column이란?

Column은 세로 방향으로 위젯들을 정렬하는 데 사용됩니다. 주로 리스트나 폼과 같은 세로 구조를 가진 레이아웃을 구성할 때 많이 활용됩니다.

캘린더 구현하기

다음은 Column을 사용하여 간단한 캘린더를 구현하는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyCalendarApp());
}

class MyCalendarApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('나의 캘린더'),
        ),
        body: MyCalendar(),
      ),
    );
  }
}

class MyCalendar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('2022년 10월'),
        Expanded(
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 7,
            ),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                margin: EdgeInsets.all(2),
                child: Text('${index + 1}'),
              );
            },
            itemCount: 31,
          ),
        ),
      ],
    );
  }
}

위 코드는 2022년 10월을 보여주는 캘린더를 구현한 것입니다. Column을 사용하여 제목과 그리드 뷰를 세로로 배치하였습니다.

이제 상세하게 코드를 분석해 보겠습니다.

MyCalendarApp 클래스는 앱의 진입점으로, MyCalendar 위젯을 홈 화면으로 지정합니다.
MyCalendar 클래스는 Column을 사용하여 캘린더의 제목과 그리드 뷰를 세로로 배치합니다.
그리드 뷰는 GridView.builder를 통해 각 날짜를 나타내는 컨테이너를 표시하고, SliverGridDelegateWithFixedCrossAxisCount를 통해 7개의 열로 나타냅니다.

마치며

Column은 세로 방향으로 위젯을 배치하는 데 유용한 기능을 제공합니다. 이를 활용하여 간단한 캘린더를 구현하는 방법을 살펴보았습니다. 여러분도 이를 참고하여 다양한 레이아웃을 구성해 보시기 바랍니다.

참고: Flutter Column 위젯 공식 문서