[flutter] 플러터 커퍼티노 스테퍼를 이용한 달력 행 수 조절 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 사용자 인터페이스를 빠르게 구축할 수 있습니다. 이번 블로그 포스트에서는 플러터의 Cupertino 스타일 플러그인을 사용하여 달력의 행 수를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

달력 위젯 생성하기

처음으로, 달력 위젯을 생성해야 합니다. 아래와 같이 TableCalendar 위젯을 사용하여 달력을 구현할 수 있습니다.

TableCalendar(
  // 달력에 표시될 이벤트 목록
  events: _events,
  
  // 달력의 시작일
  startDay: DateTime.now(),
  
  // 달력의 끝일
  endDay: DateTime.now().add(Duration(days: 365)),
  
  // 달력 셀의 모서리를 둥글게 처리
  borderRadius: BorderRadius.circular(8),
  
  // 달력 셀의 배경 색상
  calendarStyle: CalendarStyle(
    todayColor: Colors.blue,
    selectedColor: Colors.green,
  ),
  
  // 일정에 대한 색상 설정
  eventLoader: (day) => _getEventsForDay(day),
  
  // 헤더의 배경 색상
  headerStyle: HeaderStyle(
    headerColor: Colors.grey,
    titleTextStyle: TextStyle(
      color: Colors.white,
      fontSize: 16,
    ),
    formatButtonDecoration: BoxDecoration(
      color: Colors.grey,
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  
  // 달력의 기능들을 설정
  calendarController: _calendarController,
),

위의 코드에서 _calendarController는 TableCalendar 위젯을 제어하기 위해 사용되는 컨트롤러입니다. 이제, 테마를 적용하여 스타일을 변경하고 행 수를 조절하는 기능을 구현해보겠습니다.

커퍼티노 스테퍼 사용하기

애플의 iOS 디자인 가이드인 커퍼티노(Cupertino) 스타일을 사용하여 스테퍼를 추가하여 행 수를 조절할 수 있습니다. 아래와 같이 CupertinoStepper를 사용하여 달력의 행 수를 동적으로 변경할 수 있습니다.

CupertinoStepper(
  // 현재 달력 행 수
  currentRowCount: _rowCount,
  
  // 행 수 증가 이벤트 처리
  onStepTapped: (value) {
    setState(() {
      _rowCount = value;
    });
  },
  
  // 행 수 감소 이벤트 처리
  onStepDecrement: () {
    setState(() {
      _rowCount--;
    });
  },
  
  // 행 수 증가 이벤트 처리
  onStepIncrement: () {
    setState(() {
      _rowCount++;
    });
  },
),

위의 코드에서 _rowCount는 현재 달력의 행 수를 나타내는 변수입니다. CupertinoStepper에서 onStepTapped, onStepDecrement, onStepIncrement를 사용하여 행 수를 조절하는 이벤트 핸들러를 정의하고, 해당 메서드에서 _rowCount 값을 변경하도록 합니다.

전체 코드

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('달력 행 수 조절'),
      ),
      body: CalendarPage(),
    ),
  ));
}

class CalendarPage extends StatefulWidget {
  @override
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  final Map<DateTime, List> _events = {
    DateTime(2022, 1, 1): ['New Year\'s Day'],
    DateTime(2022, 1, 6): ['Epiphany'],
    DateTime(2022, 2, 14): ['Valentine\'s Day'],
  };

  final CalendarController _calendarController = CalendarController();
  int _rowCount = 5;

  List _getEventsForDay(DateTime day) {
    return _events[day] ?? [];
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TableCalendar(
          events: _events,
          startDay: DateTime.now(),
          endDay: DateTime.now().add(Duration(days: 365)),
          borderRadius: BorderRadius.circular(8),
          calendarStyle: CalendarStyle(
            todayColor: Colors.blue,
            selectedColor: Colors.green,
          ),
          eventLoader: (day) => _getEventsForDay(day),
          headerStyle: HeaderStyle(
            headerColor: Colors.grey,
            titleTextStyle: TextStyle(
              color: Colors.white,
              fontSize: 16,
            ),
            formatButtonDecoration: BoxDecoration(
              color: Colors.grey,
              borderRadius: BorderRadius.circular(12),
            ),
          ),
          calendarController: _calendarController,
        ),
        SizedBox(height: 16),
        Text('행 수: $_rowCount'),
        SizedBox(height: 16),
        CupertinoStepper(
          currentRowCount: _rowCount,
          onStepTapped: (value) {
            setState(() {
              _rowCount = value;
            });
          },
          onStepDecrement: () {
            setState(() {
              _rowCount--;
            });
          },
          onStepIncrement: () {
            setState(() {
              _rowCount++;
            });
          },
        ),
      ],
    );
  }
}

위의 코드를 실행하면 플러터 앱에서 달력 위젯과 함께 행 수를 조절하는 스테퍼가 표시됩니다. 사용자는 스테퍼의 버튼을 클릭하거나 터치하여 행 수를 조절할 수 있습니다.

이제 플러터의 커퍼티노 스타일 플러그인을 사용하여 달력의 행 수를 동적으로 조절하는 방법에 대해 알아보았습니다. 이를 응용하여 더 다양한 기능을 추가하고 개선할 수 있습니다.

달력 위젯 생성하기

커퍼티노 스테퍼 사용하기

전체 코드

참고 자료