앞서 공부한대로 각 스크린은 stack 구조로 쌓인다.
ex)[HomeScreen(), FirstScreen(), SecondScreen()…]
만약 stack에 HomeScreen() 뿐인데 pop() 을 하면 검은 화면이 뜨면서 앱이 정상적으로 작동하지 않게 된다.
이를 방지하기위해 maybePop()을 사용한다.
maybePop()
// HomeScreen()
ElevatedButton(
onPressed: () {
Navigator.of(context).maybePop(123); // 더이상 뒤로갈 페이지가 없을때는 뒤로가기가 되지 않는다.
},
child: Text('Pop'),
),
// HomeScreen()
ElevatedButton(
onPressed: () {
Navigator.of(context).maybePop(123); // 더이상 뒤로갈 페이지가 없을때는 뒤로가기가 되지 않는다.
},
child: Text('Pop'),
),
// HomeScreen() ElevatedButton( onPressed: () { Navigator.of(context).maybePop(123); // 더이상 뒤로갈 페이지가 없을때는 뒤로가기가 되지 않는다. }, child: Text('Pop'), ),
canPop()
ElevatedButton(
onPressed: () {
print(Navigator.of(context).canPop()); // false (더이상 돌아갈 페이지가 없을때 false 프린터)
},
child: Text('can pop'),
),
ElevatedButton(
onPressed: () {
print(Navigator.of(context).canPop()); // false (더이상 돌아갈 페이지가 없을때 false 프린터)
},
child: Text('can pop'),
),
ElevatedButton( onPressed: () { print(Navigator.of(context).canPop()); // false (더이상 돌아갈 페이지가 없을때 false 프린터) }, child: Text('can pop'), ),
ios는 그렇지 않지만, 안드로이드의 경우에는 기본적으로 시스템상 뒤로가기가 존재한다. 이때 pop할 페이지가 존재하지 않기때문에 뒤로가기를 막아야한다면 어떻게 할까?
시스템적으로 누르는 뒤로가기 이벤트를 직접적으로 리스닝하는 방법은 없으나, 막을 수는 있다. WillPopScope() 위젯으로 감싸고, pop 이 불가능하도록 false를 리턴하면 됨.
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
// true - pop 가능
// false - pop 불가능
return false;
},
child: MainLayout(
title: 'Home Screen',
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('pop'),
),
],
),
);
}
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
// true - pop 가능
// false - pop 불가능
return false;
},
child: MainLayout(
title: 'Home Screen',
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('pop'),
),
],
),
);
}
}
@override Widget build(BuildContext context) { return WillPopScope( onWillPop: () async { // true - pop 가능 // false - pop 불가능 return false; }, child: MainLayout( title: 'Home Screen', children: [ ElevatedButton( onPressed: () { Navigator.of(context).pop(); }, child: Text('pop'), ), ], ), ); } }
canPop()과 응용하여 사용하면 좋음
return WillPopScope(
onWillPop: () async {
// true - pop 가능
// false - pop 불가능
final canPop = Navigator.of(context).canPop();
return canPop;
},
return WillPopScope(
onWillPop: () async {
// true - pop 가능
// false - pop 불가능
final canPop = Navigator.of(context).canPop();
return canPop;
},
return WillPopScope( onWillPop: () async { // true - pop 가능 // false - pop 불가능 final canPop = Navigator.of(context).canPop(); return canPop; },