flutter / dart 업그레이드 - material3, PopScope

flutter_naver_map 패키지 신버전 출시

카페자리 앱의 가장 핵심 패키지인
네이버 지도 패키지의 새 버전이 나왔다.

이를 사용하기 위해서는
android에서 compile sdk version을 34로,
min sdk version을 23으로,
flutter와 dart를 최신버전으로
업그레이드 해야만 했다.

별 생각없이 업그레이드 했다가
아니나 다를까 문제가 발생했고,
간단하게 정리해보려한다.

flutter / dart / pub 업그레이드

compile sdk version, min sdk version은
그냥 넘버링만 바꾸면 된다.

flutter와 dart 업그레이드의 경우
일단 기존 버전을 확인해보고
업그레이드를 진행하면 된다.
현 최신버전 - flutter: 3.16.5 / dart: 3.2.3

// 터미널에서 다음을 입력해 버전을 확인하자
flutter --version

본인 버전이 이것보다 낮다면 업그레이드 해주자.

flutter upgrade

// 안되면 아래 명령어로 강제하자
flutter upgrade --force 

dart는 자동으로 업그레이드 될 것이다.

이제 pub 패키지도 업그레이드 해야한다.
원래는 각 패키지 버전을 확인하고
하나씩 업그레이드 하는게 정석이지만,

상남자 호소인으로서 그런거 없이
한번에 업그레이드 해준다.

flutter pub upgrade

그리고 앱 삭제 후 다시 실행해
새로운 버전의 앱을 실행해본다.

문제발생

혹시나가 역시나, 크게 두가지 문제가 발생했다.

1. 일부 UI깨짐

Dialog	Button	Tab

2. flutter_native_splash 패키지와 충돌

스플래시 화면을 쉽게 만들어주는
flutter_native_splash 패키지와 지도가
동시에 실행되지 않는 문제가 발생했다.

현재 dev버전인 1.1.1 네이버 지도버전에서는
해결된 것으로 확인돼서,해당 버전이 release되면
자연스럽게 해결될 것으로 보인다.

UI가 깨지는건 사이즈를 조절해주면
쉽게 해결되는 부분이지만,
왜 패키지와 flutter 버전업만으로
갑자기 깨졌는지 원인을 좀 찾아보려한다.

가장 먼저 flutter 3.16 release에서
바뀐점을 짚어본다.

flutter what's new 링크

그냥 대문짝만하게 원인이 써져있다..
이제 material3가 default로 적용된다고 하니
기존 material2로 적용된 코드를 바꿔주거나
useMaterial3: false를 적용해주라고 되어있다.

아직 material3에서만 활용할 수 있는 장점을
크게 찾지는 못해서(결국 디자인은 커스터마이징 하니까)
간편하게 useMaterial3: false만 적용해주도록 한다.

먼저 기존 적용하던 theme data를 수정해준다.

static final ThemeData lightTheme = ThemeData(
  // 여기에 추가
  useMaterial3: false,
  .
  .
  .
);

이렇게 만들어놓은 theme data를 router에 적용해준다.

MaterialApp.router(
  theme: Theming.lightTheme,
  routerConfig: appRouter,
  debugShowCheckedModeBanner: false,
),

Dialog	Button	Tab

깔끔하게 해결됐다.

deprecated: WillPopScope

코드를 살펴보다가 불쾌한 것을 발견했다.

WillPopScope가 deprecated된 것이다.
PopScope라는 걸로 대체하라는데,
이 때 몇가지 수정해줘야 할 사항이 있다.

PopScope의 기본적인 사용법은 다음과 같다.

PopScope(
  canPop: false,
  onPopInvoked: (result) {
    if (result) {
      // pop이 실행된 경우
    } else {
      // pop이 실행되지 않은 경우
  },
  child: Text("test")
)

canPop을 통해 child에서의 pop실행을
가능하게 할건지 여부를 결정할 수 있다.

만약 true로 한다면 항상 pop이 실행되고 나서
onPopInvoked에 설정한 로직이 실행된다.

카페자리의 경우에는 지도가 아닌 탭에서
pop 실행시 지도 탭으로 이동한다거나,
bottom sheet이 expand된 상태에서
pop 실행시 bottom sheet을 dispose
시켜야하므로, canPop을 false로 두었다.

따라서 result값엔 false가 올 것이고
실행시키려는 로직을 작성해주면 된다.

WillPopScope와 달라진 점은
실행 순서인 것 같다.

WillPopScope에서는 canPop 파라미터 없이
일단 pop 실행에 앞서 onPop을 진행하고,
onPop에서 return된 bool값을 통해
pop 여부를 결정했다면,

PopScope에서는 canPop을 통해 pop여부를
결정하고 리턴된 bool값을 통해
onPopInvoked 로직을 진행하는 것이다.

이렇게 문제될만한 코드를 모두 수정했고,
맘편히 다음 버전을 낼 수 있을 것 같다ㅎㅎ