[flutter] 플러터(Flutter)에서 이벤트와 상태 처리하기

18 Dec 2023

flutter

이벤트 처리와 상태 관리는 플러터 앱 개발에서 매우 중요한 부분입니다. 사용자 입력, 네트워크 응답, 앱 상태 변화 등 다양한 이벤트를 처리하고, 그에 따른 화면의 상태를 관리해야 합니다. 플러터에서는 다양한 방법으로 이벤트 처리와 상태 관리를 할 수 있습니다.

이벤트 처리

GestureDetector를 이용한 이벤트 처리

GestureDetector 위젯을 사용하면 터치 및 제스처 이벤트를 감지하고 처리할 수 있습니다. 아래는 GestureDetector를 이용한 간단한 터치 이벤트 처리의 예시입니다.

GestureDetector(
  onTap: () {
    // 터치 이벤트 처리 로직
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

이벤트 버스를 활용한 이벤트 전파

이벤트 버스 패턴을 사용하면 앱 전체에서 발생한 이벤트를 효과적으로 관리할 수 있습니다. 이벤트 버스를 사용하면 여러 위젯 간의 통신이나 이벤트 전파에 용이합니다.

// 이벤트 버스 초기화
EventBus eventBus = EventBus();

// 이벤트 발행
eventBus.fire(MyEvent());

// 이벤트 수신
_eventBus.on<MyEvent>().listen((event) {
  // 이벤트 처리 로직
});

상태 관리

Provider 패키지를 이용한 상태 관리

Provider 패키지를 이용하면 상태를 관리하고 필요한 곳에서 상태를 공유할 수 있습니다. Provider 패키지를 통해 상태 관리를 할 때, 간단한 예제는 다음과 같습니다.

// 상태 클래스 정의
class MyModel extends ChangeNotifier {
  int _counter = 0;
  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

// Provider 위젯으로 상태 공유
ChangeNotifierProvider(
  create: (context) => MyModel(),
  child: Consumer<MyModel>(
    builder: (context, myModel, child) {
      return Text('${myModel.counter}');
    },
  ),
)

Bloc 라이브러리를 활용한 상태 관리

Bloc 라이브러리를 사용하면 플러터 앱의 복잡한 상태를 효율적으로 관리할 수 있습니다. Bloc 패턴을 사용한 상태 관리의 예시는 다음과 같습니다.

// 이벤트
enum CounterEvent {
  increment,
  decrement,
}

// Bloc 클래스 정의
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    if (event == CounterEvent.increment) {
      yield state + 1;
    } else if (event == CounterEvent.decrement) {
      yield state - 1;
    }
  }
}

이제 이벤트 처리와 상태 관리를 위한 각종 기능들을 플러터에서 어떻게 사용하는지 알아보았습니다. 이러한 기능들을 적절히 활용하여 효율적이고 유지보수가 쉬운 앱을 개발할 수 있습니다.