[flutter] 플러터 Riverpod를 사용하여 앱에 캘린더 일정 추가 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

이번에는 플러터 Riverpod를 사용하여 앱에 캘린더 일정 추가 기능을 구현해보도록 하겠습니다. Riverpod는 플러터의 상태 관리 패키지로, 앱 전역 상태 관리를 쉽게 할 수 있게 해줍니다.

Step 1: Riverpod 의존성 추가하기

먼저, pubspec.yaml 파일에 Riverpod의 의존성을 추가합니다. 아래와 같이 dependencies 섹션에 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^0.12.1

프로젝트 디렉토리에서 패키지를 가져오기 위해 터미널에서 flutter pub get 명령어를 실행합니다.

Step 2: 캘린더 일정 추가 기능 구현하기

우리는 앱의 캘린더 페이지에서 일정을 추가할 수 있도록 구현할 것입니다. 먼저, 해당 페이지에 필요한 위젯들을 생성하고 UI를 구성합니다.

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

class CalendarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('캘린더 일정 추가'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(
                labelText: '일정 제목',
              ),
              onChanged: (value) {
                // 제목 입력 값 변화 처리
              },
            ),
            ElevatedButton(
              onPressed: () {
                // 일정 추가 기능 구현
              },
              child: Text('일정 추가'),
            ),
          ],
        ),
      ),
    );
  }
}

다음으로, Riverpod를 사용하여 일정 추가 기능을 구현합니다. Riverpod를 사용하면 상태 변화를 관리하고 의존성 주입을 통해 필요한 상태를 사용할 수 있게 됩니다.

final calendarProvider = Provider<CalendarState>((ref) => CalendarState());

class CalendarState {
  List<String> schedules = [];

  void addSchedule(String schedule) {
    schedules.add(schedule);
  }
}

class CalendarPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final calendarState = watch(calendarProvider);
    
    return Scaffold(
      appBar: AppBar(
        title: Text('캘린더 일정 추가'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(
                labelText: '일정 제목',
              ),
              onChanged: (value) {
                // 제목 입력 값 변화 처리
              },
            ),
            ElevatedButton(
              onPressed: () {
                String schedule = '일정 제목'; // 일정 제목 값 가져오기
                calendarState.addSchedule(schedule);
              },
              child: Text('일정 추가'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 calendarProvider는 앱 전역에서 상태를 관리하는 Provider입니다. CalendarState 클래스는 일정을 저장하고 추가하는 기능을 제공합니다. CalendarPage 위젯은 ConsumerWidget을 상속받아서 Riverpod의 상태 변화를 감지하고 필요한 상태를 사용합니다.

이제 앱에서 해당 페이지를 호출하면, 사용자는 일정 제목을 입력하고 “일정 추가” 버튼을 눌러 일정을 추가할 수 있습니다.

마무리

Riverpod를 사용하여 플러터 앱에 캘린더 일정 추가 기능을 구현하는 방법을 알아보았습니다. Riverpod를 활용하면 상태 관리를 효율적으로 할 수 있으며, 사용자가 일정을 추가하고 관리할 수 있습니다.