[Flutter] WillPopScope 안드로이드, ios 시스템 BackButton 막기

Flutter는 앱을 개발할 때는 ios와 Android를 함께 신경써줘야 합니다.

특히 안드로이드의 경우에는 왼쪽 하단의 시스템 백 버튼으로 뒤로 갈 수 있는 기능이 있습니다. 앱을 만들 때 이 부분을 처리해줘야 하는데 이번 글을 통해 정리해보겠습니다. 

 

먼저 백버튼을 막기 위해 Scaffold 위젯을 WillPopScope 위젯으로 감싸주면 됩니다. 

 

예시코드

class SamplePage1 extends StatelessWidget {
  const SamplePage1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        return Future(() => false);
      },
      child: Scaffold(
        appBar: AppBar(),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 300,
              color: Colors.amber,
            ),
            ElevatedButton(
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(
                    builder: (context) {
                      return SamplePage2();
                    },
                  ));
                },
                child: Text('Go to Page2'))
          ],
        ),
      ),
    );
  }
}

 

ios의 경우에는 appbar가 없으면 자동적으로 백버튼이 생성되지 않으니 참고하세요!

 

예시1 구현화면

 

 

문제 1.

하지만 만약 appbar가 걸려있는 상태에서 이 WillPopScope 위젯을 사용하게 된다면 앱바의 뒤로가기 버튼을 사용할 수 없게 됩니다. 저는 이 문제가 아니므로 패스합니다. 대신 이 글을 찾아보시면 정리가 매우 잘 되어있습니다. 🙂

https://blog.naver.com/chandong83/221881103496

플러터(Flutter) - Back Button 막기(Disable Back Button)

 

문제 2. 시스템 버튼 클릭 시 disabled가 아닌 다른 화면으로 이동하고 싶음

기획의도에 따라 시스템 백 버튼을 클릭했을 때 Main화면이 보여지도록 작업중이었습니다.

하지만 WillPopScope 위젯은 true 와 false 값만으로 처리하기 때문에 원하는 화면을 만나기가 조금 까다로웠습니다. 🥲

이 글을 읽어보시면 역시 예시가 잘 나와있습니다. 

https://seizemymoment.tistory.com/51

[Flutter] Named Routing을 이용한 Navigation (pushedName / pop / WillPopScope)

 

class BoardingPage1 extends StatelessWidget {
  const BoardingPage1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        Navigator.push(context, MaterialPageRoute(
          builder: (context) {
            return MyApp();
          },
        ));
        return false;
      },
      child: Scaffold(
        appBar: AppBar(),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 300,
              color: Colors.amber,
            ),
            ElevatedButton(
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(
                    builder: (context) {
                      return BoardingPage2();
                    },
                  ));
                },
                child: Text('Boarding Page2로 이동'))
          ],
        ),
      ),
    );
  }
}

 

예시2 구현화면

 

 

 

현재 안드로이드 기기와 연결되지 않아 확인하긴 어렵지만 appbar로 테스트했을 때 원하는 페이지로 잘 이동하는 것을 볼 수 있습니다.  👍