Problem Description:
After continuously jumping to multiple pages in Flutter, pressing the return button in the navigation bar (executed by the pop method) is inconsistent with the return behavior of pressing the return key on the mobile phone entity.
Steps to reproduce:
There are 4 Pages, respectively, Page1, Page2, Page3, Page4;
Jump sequence: Page1 (destroyed after jump)->Page2->Page3->Page4;
At this time, press the return button of the navigation bar to display: Page4->Page3->Page2; the behavior is normal.
If the physical key of the mobile phone is pressed, the performance is: Page4->Page2; the behavior is abnormal.
problem causes:
Page1 is a StatelessWidget type, which is the startup entry page of the App;
Page2 is a StatefulWidget type, which is a transition page before entering the App homepage (logic needs, first select a category before entering the homepage); Page3
is a StatelessWidget type, which is the App homepage (Main +4 Tabs);
Page4 is a StatefulWidget type, a secondary page;
Page1->Page2 uses pushAndRemoveUntil, and Page1 is destroyed after the jump;
Page2->Page3, Page3->Page4 both use push, and the pages are not destroyed. At this time, when the entity return button is pressed, the return logic is wrong, and it is determined by Page4 Returned directly to Page2.
Solution:
After a period of research, when Page2 jumps to Page3, use pushAndRemoveUntil to destroy Page2, and then press the return key from Page4 to return to Page3 normally.
Most of the Flutter tutorials generally only talk about the difference between StatelessWidget and StatefulWidget, one static and one dynamic, but few mention the difference between jump and return logic;
Through these behaviors, it seems that some logic can be seen. If the page of the StatelessWidget type is in the middle of the page stack, then you press the return key on the top of the stack to skip the page of the StatelessWidget type and return to its previous level, so It is best to use at most two pages of StatelessWidget type in the entire program, namely the entry main.dart, and the home page. Use the home page as the bottom page of the entire application stack, or only set the entry main.dart as StatelessWidget.
As for why StatelessWidget is used, it is because some themes, internationalization, state management and other configurations can be defined in StatelessWidget.