[flutter] 플러터 프로바이더를 사용하여 알람 설정하기

22 Dec 2023

flutter

플러터 앱에서 알람을 설정하고 관리하는 기능을 구현하려면 앱 전반에서 데이터를 공유하고 상태를 관리해야 합니다. 이를 위해 플러터 프로바이더를 사용하여 전역 상태 관리를 하여 알람 설정 기능을 구현하는 방법을 알아보겠습니다.

1. 프로바이더 설정하기

먼저, 알람 관련 데이터와 알람을 관리하는 상태를 담는 프로바이더를 설정해야 합니다.

import 'package:flutter/material.dart';

class AlarmProvider extends ChangeNotifier {
  List<String> alarms = [];

  void addAlarm(String time) {
    alarms.add(time);
    notifyListeners();
  }

  void removeAlarm(String time) {
    alarms.remove(time);
    notifyListeners();
  }
}

위의 코드는 AlarmProvider 클래스를 정의하고, 해당 클래스가 알람을 추가하고 제거할 수 있도록 하는 기능을 구현한 것입니다. 이후 해당 프로바이더를 앱 상단에서 사용할 수 있도록 앱 전체에 등록해야 합니다.

2. 프로바이더 상속 및 사용하기

프로바이더를 사용하기 위해서는 해당 프로바이더를 상속하여 원하는 화면에서 사용해야 합니다.

class AlarmScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final alarmProvider = Provider.of<AlarmProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('알람 설정'),
      ),
      body: Column(
        children: [
          // 알람 목록 표시 및 제어 UI 등을 구현합니다.
        ],
      ),
    );
  }
}

위의 코드는 AlarmScreen 클래스에서 AlarmProvider를 상속하여 알람 관련 상태를 사용하는 예시입니다.

3. 알람 관련 기능 구현하기

이제 알람을 추가하고 제거하는 기능을 구현해야 합니다.

class AddAlarmScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final alarmProvider = Provider.of<AlarmProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('알람 추가'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            alarmProvider.addAlarm('8:00 AM');
          },
          child: Text('알람 추가'),
        ),
      ),
    );
  }
}

위의 코드는 AddAlarmScreen 클래스에서 알람을 추가하는 기능을 구현한 예시입니다.

요약

이제 프로바이더를 사용하여 전역 상태를 관리하고 알람 관련 기능을 구현하는 방법에 대해 알아보았습니다. 프로바이더를 사용하면 앱 전반에서 데이터를 공유하고 상태를 관리할 수 있으며, 이를 통해 알람 설정과 관리 기능을 효과적으로 구현할 수 있습니다.

참고:

Flutter 프로바이더 (Provider) 패키지