[flutter] 플러터 Wrap을 사용하여 앱의 캘린더 기능을 구현하는 방법

07 Dec 2023

flutter

이번에는 Flutter 앱에서 Wrap 위젯을 사용하여 캘린더 기능을 구현하는 방법을 알아보겠습니다. Wrap은 자식 위젯을 가로로 나열하면서 필요에 따라 줄바꿈을 수행하는 위젯입니다. 이를 활용하여 캘린더의 날짜를 표시하고 선택할 수 있는 인터페이스를 만들어보겠습니다.

1. 프로젝트 설정

먼저 Flutter 프로젝트를 생성하고 필요한 의존성을 추가합니다.

// pubspec.yaml 파일
dependencies:
  flutter:
    sdk: flutter

의존성을 추가한 후, 패키지를 가져와서 아래와 같이 사용할 준비를 합니다.

import 'package:flutter/material.dart';

2. 캘린더 기능 구현하기

실제로 캘린더를 구현하기 위해 Wrap 위젯을 사용하여 일련의 날짜 위젯을 나열하고, 각 날짜 위젯을 클릭할 수 있도록 만들어보겠습니다.

class CalendarWidget extends StatefulWidget {
  @override
  _CalendarWidgetState createState() => _CalendarWidgetState();
}

class _CalendarWidgetState extends State<CalendarWidget> {
  List<DateTime> _selectedDates = List<DateTime>();

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8.0,
      runSpacing: 8.0,
      children: generateCalendarDates(),
    );
  }

  List<Widget> generateCalendarDates() {
    List<Widget> dates = List<Widget>();

    for (int i = 1; i <= 31; i++) {
      final date = DateTime(DateTime.now().year, DateTime.now().month, i);
      dates.add(
        Container(
          decoration: BoxDecoration(
            color: _isSelected(date) ? Colors.blue : Colors.transparent,
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: FlatButton(
            onPressed: () => _selectDate(date),
            child: Text(
              i.toString(),
              style: TextStyle(
                color: _isSelected(date) ? Colors.white : Colors.black,
                fontWeight: _isSelected(date) ? FontWeight.bold : FontWeight.normal,
              ),
            ),
          ),
        ),
      );
    }

    return dates;
  }

  bool _isSelected(DateTime date) {
    return _selectedDates.contains(date);
  }

  void _selectDate(DateTime date) {
    setState(() {
      if (_isSelected(date)) {
        _selectedDates.remove(date);
      } else {
        _selectedDates.add(date);
      }
    });
  }
}

위 코드에서는 CalendarWidget이라는 StatefulWidget을 생성하고, _selectedDates라는 변수를 통해 선택된 날짜를 관리합니다. Wrap 위젯을 사용하여 자식 위젯들을 가로로 나열하므로, 날짜들을 generateCalendarDates() 메서드를 통해 생성하여 Wrap 위젯의 children 속성으로 전달합니다.

각 날짜 위젯은 Container와 FlatButton로 구성되어 있습니다. Container는 날짜를 감싸고 있는 박스를 관리하며, 선택된 날짜인 경우에는 파란색으로 표시됩니다. FlatButton은 실제 날짜를 클릭할 수 있는 버튼 역할을 하며, 클릭하면 _selectDate() 메서드가 호출되어 선택된 날짜를 _selectedDates 리스트에 추가하거나 삭제합니다.

3. 사용하기

위의 코드를 통해 캘린더 기능이 구현되었습니다. 이를 앱에서 사용하려면 해당 위젯을 화면에 배치하면 됩니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calendar App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Calendar'),
        ),
        body: CalendarWidget(),
      ),
    );
  }
}

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

위와 같이 앱의 메인 위젯에서 CalendarWidget을 화면에 배치하여 사용하면 됩니다.

결론

이번에는 Flutter의 Wrap 위젯을 사용하여 캘린더 기능을 구현하는 방법을 살펴보았습니다. Wrap은 유용한 위젯으로, 가로로 나열하면서 필요에 따라 줄바꿈을 수행하는 기능을 제공합니다. 캘린더 기능을 구현할 때 Wrap을 사용하면 간편하게 날짜를 표시하고 선택할 수 있는 인터페이스를 구현할 수 있습니다.