플러터에서 WillPopScope 위젯 사용법: 뒤로 가기 동작 제어하기

 

WillPopScope 위젯은 플러터(Flutter) 애플리케이션에서 사용자가 뒤로 가기 버튼을 눌렀을 때의 동작을 제어하는 데 유용한 위젯입니다.

이 위젯을 사용하면 사용자에게 특정 작업을 완료하도록 요구하거나, 애플리케이션의 상태를 확인한 후 뒤로 가기 동작을 허용할 수 있습니다.

이 포스트에서는 WillPopScope 위젯의 기본 개념과 사용 방법, 그리고 어떻게 애플리케이션의 뒤로 가기 동작을 제어할 수 있는지에 대해 자세히 설명하겠습니다.

 

1. WillPopScope 위젯이란?

WillPopScope 위젯은 사용자가 뒤로 가기 버튼을 눌렀을 때의 동작을 제어할 수 있도록 해줍니다.
이 위젯은 주로 Android에서의 물리적 뒤로 가기 버튼과 iOS에서의 스와이프 제스처와 같은 뒤로 가기 동작을 처리하는 데 사용됩니다.
WillPopScope을 통해 뒤로 가기 동작을 방지하거나, 사용자가 특정 조건을 만족할 때만 뒤로 가기 동작을 허용할 수 있습니다.

2. WillPopScope의 기본 사용법

2.1 기본 구조

WillPopScope은 onWillPop 콜백을 사용하여 뒤로 가기 동작을 처리합니다.
이 콜백은 Future<bool>을 반환하며, true를 반환하면 뒤로 가기 동작이 수행되고, false를 반환하면 뒤로 가기 동작이 취소됩니다.

WillPopScope(
  onWillPop: () async {
    // 뒤로 가기 동작을 제어할 로직을 여기에 작성
    bool shouldPop = await showDialog(
      context: context,
      builder: (BuildContext context) => AlertDialog(
        title: Text('경고'),
        content: Text('정말로 앱을 종료하시겠습니까?'),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: Text('아니요'),
          ),
          TextButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: Text('예'),
          ),
        ],
      ),
    );

    return shouldPop;
  },
  child: Scaffold(
    appBar: AppBar(
      title: Text('WillPopScope 예제'),
    ),
    body: Center(
      child: Text('뒤로 가기 버튼을 눌러보세요.'),
    ),
  ),
);

위의 예제에서는 WillPopScope을 사용하여 사용자가 뒤로 가기 버튼을 눌렀을 때 확인 대화 상자를 표시합니다.
사용자가 대화 상자에서 "예"를 선택하면 뒤로 가기 동작이 허용되고, "아니요"를 선택하면 뒤로 가기 동작이 취소됩니다.

2.2 onWillPop 콜백

onWillPop 콜백은 Future<bool>을 반환하는 비동기 함수입니다.
Future를 사용하여 비동기 작업을 수행하고, 작업이 완료되면 true 또는 false를 반환하여 뒤로 가기 동작을 제어합니다.

Future<bool> _onWillPop() async {
  // 사용자에게 확인 대화 상자를 보여주고, 사용자의 응답에 따라 뒤로 가기 동작을 제어합니다.
  bool shouldPop = await showDialog(
    context: context,
    builder: (BuildContext context) => AlertDialog(
      title: Text('경고'),
      content: Text('정말로 앱을 종료하시겠습니까?'),
      actions: <Widget>[
        TextButton(
          onPressed: () => Navigator.of(context).pop(false),
          child: Text('아니요'),
        ),
        TextButton(
          onPressed: () => Navigator.of(context).pop(true),
          child: Text('예'),
        ),
      ],
    ),
  );

  return shouldPop;
}

3. WillPopScope의 활용 예시

3.1 폼 제출 확인

폼을 작성 중인 화면에서 사용자가 뒤로 가기 버튼을 눌렀을 때, 변경된 내용을 저장하거나 확인하는 대화 상자를 표시할 수 있습니다.

WillPopScope(
  onWillPop: () async {
    bool hasUnsavedChanges = true; // 예를 들어, 폼에 변경 사항이 있을 경우
    if (hasUnsavedChanges) {
      return await showDialog(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: Text('변경 사항'),
          content: Text('저장하지 않은 변경 사항이 있습니다. 나가시겠습니까?'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: Text('아니요'),
            ),
            TextButton(
              onPressed: () {
                // 변경 사항 저장 로직을 여기에 추가
                Navigator.of(context).pop(true);
              },
              child: Text('저장하고 나가기'),
            ),
          ],
        ),
      );
    }
    return true; // 변경 사항이 없는 경우 뒤로 가기 동작을 허용
  },
  child: Scaffold(
    appBar: AppBar(
      title: Text('폼 예제'),
    ),
    body: Center(
      child: Text('폼을 작성 중입니다.'),
    ),
  ),
);

3.2 앱 종료 확인

사용자가 앱을 종료하려고 할 때, 현재 진행 중인 작업을 저장하거나 종료 확인을 요구할 수 있습니다.

WillPopScope(
  onWillPop: () async {
    return await showDialog(
      context: context,
      builder: (BuildContext context) => AlertDialog(
        title: Text('앱 종료'),
        content: Text('정말로 앱을 종료하시겠습니까?'),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: Text('아니요'),
          ),
          TextButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: Text('예'),
          ),
        ],
      ),
    );
  },
  child: Scaffold(
    appBar: AppBar(
      title: Text('앱 종료 확인'),
    ),
    body: Center(
      child: Text('뒤로 가기 버튼을 눌러서 앱 종료 확인을 해보세요.'),
    ),
  ),
);

4. 결론

WillPopScope 위젯은 플러터 애플리케이션에서 사용자가 뒤로 가기 버튼을 눌렀을 때의 동작을 제어할 수 있는 강력한 도구입니다.
이를 통해 사용자에게 중요한 작업을 완료하도록 요구하거나, 애플리케이션의 상태를 확인할 수 있습니다.
WillPopScope을 적절히 활용하여 더 나은 사용자 경험을 제공하세요.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱