[flutter] 플러터 Riverpod를 이용한 디바이스 백 버튼 처리 방법

30 Nov 2023

flutter

플러터(Flutter)에서는 플랫폼별로 백 버튼의 동작을 처리해야 할 때가 있습니다. 특히 모바일 앱에서는 디바이스의 백 버튼을 눌렀을 때, 이전 화면으로 돌아가는 기능이 기본적으로 제공되어야 합니다.

이번 포스트에서는 플러터의 상태 관리 라이브러리 중 하나인 Riverpod를 이용하여 디바이스의 백 버튼을 처리하는 방법에 대해 알아보겠습니다.

Riverpod란?

Riverpod는 플러터의 상태 관리를 위해 만들어진 라이브러리로, Provider 패턴을 사용하여 간편한 상태 관리를 제공합니다. 상태 변경에 따른 UI 갱신을 자동으로 처리해주기 때문에 효율적인 상태 관리를 할 수 있습니다.

백 버튼 처리 방법

먼저 Riverpod 라이브러리를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  riverpod: ^1.0.1

이전 화면으로 돌아가기 위해 Navigator.pop() 메서드를 사용합니다. 따라서 화면을 전환할 때 Riverpod를 사용하여 상태를 관리하고, 백 버튼을 눌렀을 때 상태 변경을 통해 이전 화면으로 돌아갈 수 있도록 구현해야 합니다.

다음은 간단한 예제 코드입니다:

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

final backButtonStateProvider = StateProvider<bool>((ref) => false);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Back Button Example'),
          ),
          body: Consumer(
            builder: (context, watch, _) {
              final backButtonState = watch(backButtonStateProvider).state;
              return Center(
                child: RaisedButton(
                  onPressed: backButtonState ? () {
                    Navigator.pop(context);
                  } : null,
                  child: Text('뒤로 가기'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

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

위 코드에서 backButtonStateProvider는 디바이스의 백 버튼 동작을 제어하는 상태를 나타내는 Provider입니다. 초기값은 false로 설정되어있고, 백 버튼에 해당하는 화면이 활성화된 경우 backButtonState를 true로 변경하여 백 버튼이 눌리면 뒤로 가도록 구현합니다.
RaisedButton 위젯의 onPressed 콜백에서는 backButtonState의 값에 따라 Navigator.pop() 메서드가 실행되도록 구현합니다. backButtonState가 true인 경우에만 버튼이 활성화되고, 백 버튼을 누를 때 현재 화면이 스택에서 제거되고 이전 화면으로 돌아가게 됩니다.

이제 Riverpod를 이용하여 디바이스의 백 버튼을 처리하는 방법에 대해 알아보았습니다. Riverpod는 간편한 상태 관리를 제공하기 때문에, 복잡한 앱에서도 효과적으로 백 버튼을 처리할 수 있습니다.

Riverpod란?

백 버튼 처리 방법

참고 자료