import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home page')),
body: Center(
child: ElevatedButton(
child: Text('Go to Second page'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SecondPage(),
),
);
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second page')),
body: Center(
child: ElevatedButton(
child: Text('Go to Third page'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ThirdPage(),
),
);
},
),
),
);
}
}
class ThirdPage extends StatelessWidget {
const ThirdPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Third page'),
),
body: Center(
child: Column(
children: [
Text('Third page'),
//Spacer(flex: 2,),
SizedBox(height:50.0,),
ElevatedButton(
child:Text('Go to Home Page'),
onPressed:(){
int numOfPop = 0;
//コールバックがtrueを返すまで、繰り返し「コールバック+pop」が呼び出される。
Navigator.of(context).popUntil((_) => numOfPop++ >= 2);
},
),
],
),
),
);
}
}
Navigator.of(context).popUntilを使うと、一度に複数画面popする(戻る)ことができます。
Navigator.of(context).popUntil allows you to pop (back) multiple screens at once.
ソースコードを見るとわかりますが、引数として渡したコールバックがtrueを返すまで「コールバック呼び出し+pop」を繰り返す、という実装です。
Looking at the source code, it seems that “callback call + pop” is repeated until the callback passed as an argument returns true.
ということで、上記のサンプルコードでThirdPageのボタンを押すと二回popされてHomePageまで遷移します。
So, when you press the ThirdPage button in the above sample code, it will be popped twice and transition to HomePage.
(_) => numOfPop++ >= 2
上記のnumOfPop++が後置インクリメントなので「評価してから加算する」ということなんですね。なので
0 → 1
の2回popが行われる、ということですね。
Since the above numOfPop++ is a post-increment, it means “evaluate and then add”.
So,
0 → 1
It means that pop is performed twice.
ですので引数として渡すコールバックを下記のように変えるとSecondPageへ遷移する挙動に変わりますね、はい。
So if you change the callback passed as an argument as follows, the behavior will change to transition to SecondPage, year.
(_) => ++numOfPop >= 2
さらに、WillPopScopeウィジェットを使うと、AppBarの戻るボタンの挙動を上書きできます。
Additionally, the WillPopScope widget allows you to override the behavior of the AppBar’s back button.
class ThirdPage extends StatelessWidget {
const ThirdPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop:() async {
int numOfPop = 0;
//コールバックがtrueを返すまで、繰り返し「コールバック+pop」が呼び出される。
Navigator.of(context).popUntil((_) => numOfPop++ >= 2);
return true;
},
child: Scaffold(
appBar: AppBar(
title: Text('Third page'),
),
body: Center(
child: Column(
children: [
Text('Third page'),
//Spacer(flex: 2,),
SizedBox(height:50.0,),
ElevatedButton(
child:Text('Go to Home Page'),
onPressed:(){
int numOfPop = 0;
//コールバックがtrueを返すまで、繰り返し「コールバック+pop」が呼び出される。
Navigator.of(context).popUntil((_) => numOfPop++ >= 2);
},
),
],
),
),
),
);
}
}
ThirdPageを上記のように変更すると、ThirdPageのAppBarの戻るボタンを押した時にもHomePageに遷移する挙動になります。
If you change ThirdPage as above, it will transition to HomePage even when you press the back button of AppBar of ThirdPage.
今回は以上です。
That’s all for today.
今プロでは今プロユーザーの皆様のFlutter/Dartの学習をサポートするため現在無料で質問を受け付けております。
We are currently accepting questions for free to support the learning of Flutter/Dart for all users of our service.
サポートできる範囲でお役に立ちたいと思っております。サポートできる範囲を超えた質問はサポートできません。
We would like to help you as much as we can. Questions beyond the scope of support cannot be supported.
お気軽に質問・要望などお寄せください。
Please feel free to send us your questions and requests.
