TIL - 영화 정보앱 (4) < Go_router Transition 효과의 문제점! >

## 해당 TIL은 주어진 과제를 수행하면서 얻은 학습 내용과, 시행착오 등등을 종합해서 작성한것임

 

1. Go_router 에서 페이지 전환 애니메이션 사용시, IOS back Swipe 가 안먹는 문제!

이전 포스팅에서, Go_router 의 페이지 전환 애니메이션을 먹이는 법에 대해서 설명한 적이 있었다.

TIL - 영화 정보앱(1) < Go_router Transition 효과, Hero 1대다 매칭법>

 

이 방식은, 단조로운 Go_router의 페이지 전환 방식에 커스텀 애니메이션을 먹일 수 있는 방법임에 틀림이 없다.

그런데 문제가 하나 발생한다!!

 

Android의 뒤로가기 버튼은 기기에서 직접 제공해주는 백 버튼이 있으며, 이로인해 어플에서 백 버튼 이벤트를 넣어주지 않아도 뒤로가기 이벤트를 실행시킬 수 있었다.

 

( 응용법으로 해당 버튼을 눌렀을때 다른 행동을 할 수 있게끔 할 수도 있음 >> 아래 포스팅 참고)

[Flutter] Android와 iOS에서 뒤로 가기 방지

 

그런데, IOS에서 뒤로가기를 지원해 주는 방법은, 기기에서 왼쪽에서 오른쪽으로 Swipe를 하는, back Swipe 방식으로 뒤로가기를 지원한다. 이 경우, 어지간하면 어느 상황에서든 IOS back Swipe가 정상작동을 하는데,

위의 페이지전환 커스텀 애니메이션을 사용하게되면, IOS back Swipe가 작동하지 않는 문제가 발생한다!!

 

이에 이리저리 구글링 및 실험해 본 결과, 이 문제를 해결하기 위한 해결법이 있었다.

 

해결법

• 페이지 전환 커스텀 애니메이션 효과를 사용하지 않는다. (실제 사용 및 해결방법)

원론적인 이야기이다. 문제가 발생하는 원인을 제거함으로써 문제를 해결하는 방법이다.

다행이도, 원래 원하던 페이지 전환 애니메이션이, 오른쪽에서 왼쪽으로 넘어가는 듯한 페이지 전환 방법이었고,

Go_router는 pageBuilder 를 통해, 해당 방법을 제공하고 있어, 굳이 커스텀 애니메이션을 사용하지 않고 구현할 수 있었다.

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const Homepage(),
      routes: [
        GoRoute(
          path: 'post',
          pageBuilder: (context, state) => MaterialPage(
              child: Detailpage(
            extra: state.extra,
          )),
        ),
      ]
    )
  ]
);

 

추가로, 플랫폼별 맞춤 트랜지션을 사용하고 싶다면 아래와 같은 방법을 사용해보자.

GoRoute(
  path: '/platform-page',
  pageBuilder: (context, state) {
    if (Platform.isIOS) {
      // iOS 스타일의 트랜지션
      return CupertinoPage(
        child: PlatformSpecificPage(),
      );
    } else {
      // Android 스타일의 트랜지션
      return MaterialPage(
        child: PlatformSpecificPage(),
      );
    }
  },
),

 

 

• 자체적으로 비슷한 효과를 집어넣기

이 방식은 IOS의 back Swipe를 최대한 따라한 이벤트 로직이다.

물론, 실제 IOS back Swipe 처럼, 페이지를 끌고 다니는 효과는 아니고, 스와이프 이벤트가 감지되면 뒤로가기 이벤트가 작동하는 방식이다. IOS 처럼 구현하기 위해서는 보다 복잡한 이벤트 처리가 필요할거 같은데.. 그걸 일일히 다 구현하는것 보다는 다른 방법을 찾아보는게 나을 수 도 있다. 

class SwipeBackPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Swipe Back Example")),
      body: GestureDetector(
        onHorizontalDragUpdate: (details) {
          if (details.primaryDelta! > 0) {
            // 왼쪽에서 오른쪽으로 스와이프가 감지되면 뒤로 가기
            Navigator.pop(context);
          }
        },
        child: SingleChildScrollView(
          child: Column(
            children: List.generate(30, (index) => ListTile(title: Text("Item $index"))),
          ),
        ),
      ),
    );
  }
}