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.