[Flutter] 화면 전환 pop (안드로이드 뒤로가기 버튼 막기- willPopScope)

pop을 이용하여 스택에 뒤로가기를 수행할 수 있는데

 

Pop

MaybePop

CanPop

 

그리고 안드로이드 옛날 기기에서

첫화면에서 뒤로가기 버튼을 눌렀을 때 pop이 안되게 해서 앱이 종료가 되는 것을 막는 기능을 수행하는

willPopScope를 알아보자

 

 

---

 

Pop

 

스택에서 뒤로 갈 Route가 존재하는 경우 Pop을 통해 이전 스택(Route)로 이동한다.

 

 

첫화면에서 버튼을 만들어 Pop을 실행하면 black화면으로 전환된다

(스택에 쌓인 것이 아예 없기 때문에 앱이 아무것도 띄우지 않고 검은 화면을 띄운다)

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

  @override
  Widget build(BuildContext context) {
      child: MainLayout(
          title: 'HomeScreen',
          children: [
            ElevatedButton(
                onPressed: (){
                  Navigator.of(context).pop();
                },
                child: Text('pop')
            ),
            ],
      ),
  }
}

 

 

---

 

MaybePop과 CanPop은 같이 보자..

 

 

CanPop은 스택에 쌓인 Route가 존재하면 true를 반환

존재하지 않으면(첫 화면) false를 반환하는데

 

MaybePop은 CanPop이 true일 때 (Route가 존재할 때) 뒤로 Pop을 진행시키고

false일 때(Route가 존재하지 않을 때, 첫 화면) 뒤로 Pop을 진행시키지 않는다.

 

 

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

  @override
  Widget build(BuildContext context) {
      child: MainLayout(
          title: 'HomeScreen',
          children: [
            ElevatedButton(onPressed: (){
              print(Navigator.of(context).canPop()); // True or False로 반환
            }, 
            child: Text('Can Pop')
            ),
            ElevatedButton(
                onPressed: (){
                  Navigator.of(context).maybePop();
                  // 매커니즘 canpop이 True일 때만 뒤로 간다
                  // 더이상 뒤로 갈 페이지가 없을 때 뒤로가기 안됨
                },
                child: Text('MaybePop')),
            ),
            ],
      ),
  }
}

 

 

---

willPopScope

 

안드로이드 기기에서 홈화면에서 뒤로가기 버튼을 눌렀을 때 앱이 종료되지 않도록..

 

onwillPop을 async로 받고

return으로 true - pop가능 (뒤로가기 누르면 앱 종료)

return으로 false - pop불가능 (뒤로가기 눌러도 앱 종료 안됨)

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

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // True - pop가능
        // false - pop불가능
        return false;
      },
      child: MainLayout(
          title: 'HomeScreen',
          children: [
              ElevatedButton(
                onPressed: () async {
                  final result = await Navigator.of(context).push(
                    MaterialPageRoute(builder: (BuildContext context) => RouteOneScreen(
                      number: 123,
                    ),
                    ),
                  );
                  print(result);
                },
                child: Text('Push'),
              )
            ],
      ),
    );
  }
}