MHLab blog
💥
dart_flutter

WillPopScope 사용 시 Deprecated 가 뜨는 경고

2024.08.14

thumbnail

예전에는 잘 사용하던 WillPopScope

플러터(Flutter)를 개발하다 보면, 보통 iOS, Android 두 플랫폼을 대상으로 개발을 한다.

iOS는 뒤로가기 라는게 없고, 바로 홈으로 돌아가지만,
안드로이드의 경우 물리(또는 소프트 버튼)을 통해서 뒤로 가기를 할 수 있다.

이런 조작을 보통 네비게이션 조작으로 보는데 WillPopScope의 경우 네비게이션 조작을 돕는 기능이라 할 수 있다.

보통 맨 최 상위 위젯에 아래와 같이 보통 작성한다.

return WillPopScope(
      onWillPop: ()  {
        return _onBackKey();
      },
        child: Scaffold()
      );

근데 저 코드를 사용하면 아래와 같은 경고가 뜬다.

‘WillPopScope.new’ is deprecated and shouldn’t be used. Use PopScope instead. This feature was deprecated after v3.12.0-1.0.pre.

3.12.0-1 부터 Deprecated 되니 대안으로 PopScope를 사용하라고 한다.


왜 사라짐?

이건 안드로이드가 올라가면서 안드로이드 14 (API 34)부터 Predictive Back Feature라는게 도입되고,
이에 따라 기존에 플러터에서 사용하던 WillPopScope의 경우 호환되지 않아 Deprecated 된다고 한다.

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

주석만 봐도 14년에 만들어서 잘 사용하던 건데 아무래도 재개발 하는게 더 싸게 먹힌 것 같다.


Predictive Back Feature?

간단히 설명하자면 뒤로 가기 제스쳐를 할 때 뒤에 있던(또는 현재 화면 이전에 있던) 화면을 미리 보여주는 기능이다.
그냥 iOS에서 스와이프 하면 보이는 기능이랑 유사한 거라 보면 된다.

궁금한 분은 구글의 공식 유튜브를 참고하자.


PopScope

얘는 24년에 나온 따끈따끈한 API다.

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

PopScope도 당연히 위젯인데 대략 아래와 같다.

class PopScope extends StatefulWidget {
  /// Creates a widget that registers a callback to veto attempts by the user to
  /// dismiss the enclosing [ModalRoute].
  const PopScope({
    super.key,
    required this.child,
    this.canPop = true,
    this.onPopInvoked,
  });
  ....
}

child의 경우 당연히 필요한 위젯이고, canPoponPopInvoked 두 가지가 있는데 어렵지 않다.


canPop

말 그대로 뒤로 넘어갈 수 있는지 여부를 나타내는 파라메타다.
기본 값은 true로 되어 있지만, 사용자가 특정 이벤트에 뒤로 가기를 막아야 할 경우 false를 주면 된다.

보통 로딩 같은 곳에서 많이 사용한다.

return PopScope(
      canPop: !loadingProvider.isLoading,
      onPopInvoked: (bool isPop) {
        ///
      },
      child: Stack(
        children: [

        ],
      ),
    );

동적으로 로딩 중일 때는 뒤로 가기를 막고,
로딩이 끝나면 이동하게끔 해줄 수 있다.


onPopInvoked

이 메서드는 뒤로 가기가 동작했을 때 호출되는 콜백 메서드다.
참고로 canPop에 값이 false던 true던 무조건 호출된다.

onPopInvoked: (bool isPop) {
    ///
},

저 isPop의 전달 값이 뒤로 가기 동작에 대한 결과를 가진다.
true면 성공, false면 실패로 된다.


정리

뭐 복잡할 줄 알았는데 간단하다.
사실 내가 풀어서 쓴 것 보다 공식 문서를 보면 더 쉽다. -_-;;


작은 개인광고 양해 바랍니다 ^^;;
👇 주인장이 직접 만든 서비스 👇
/static/29a05fefb322c94d5eb3f7d05c7c224e/myc_icon.png
Typescript
React
Next.Js
Nest.Js
마와셀(웹) - 와인 가격 비교
와인 가격 비교 서비스
postweb
/static/29a05fefb322c94d5eb3f7d05c7c224e/myc_icon.png
Dart
Flutter
hive
provider
마와셀(엡) - 와인과 셀러 관리, 시음노트
보유한 와인의 관리, 시음노트 작성, 보유 와인 셀러의 관리 어플리케이션
/static/d35d260fd4813f4a6d284a7f4fbcdf49/bcow_icon.png
Typescript
React
Next.Js
Nest.Js
흑우집합소(웹) - 로또번호 추천 서비스
로또번호 추천 서비스
/static/d35d260fd4813f4a6d284a7f4fbcdf49/bcow_icon.png
Dart
Flutter
drift
provider
흑우집합소(앱) - 로또번호 추천 서비스
로또번호 추천 서비스

© Powered by danmin