FlutterのNavigator.pop(context)で黒い画面が表示される理由と解決方法

Flutterで、Navigator.popをして一個前の画面に戻ろうとしたら、画面が真っ黒になることがあります。

この原因は、MaterialAppウィジェットを複数重ねているからです。

多くの場合、新しいページやスクリーンのトップウィジェットとしてScaffoldを使用するのですが、

初心者は誤ってMaterialAppを使用してしまうことがありますし、もしそういうことをしても何も警告されません。

つまり、MaterialAppは新しいNavigatorを作成するわけで、MaterialAppでpushした先でまたMaterialAppを使って画面を構築していると、

ウィジェットツリーに2つのNavigatorができてしまいます。

証拠に、MaterialAppで作成した画面からpushで新しい画面に行ったとき、トップバーに「戻る」アイコンがないはずです。

つまり、Navigator.of(context)は最も近いナビゲーターを探すので、ルートの遷移先で、MaterialAppが使用されてる場合、履歴は最初のNavigatorに保存されているので、このNavigatorはポップバックできないということですよね。

そのため、黒い画面が表示されます。

それで、この問題を解決するには、すべてのネストした画面でMaterialAppの代わりにScaffoldをトップウィジェットすれば解決できます。

例えば、main.dartでフォームスクリーンをMaterialAppで作ってるとすれば、

✴︎この先はOFF無料会員様のみ読むことが出来ます。無料でOFF会員になって限定記事を余すことなく読みませんか?新規登録はこちらから。既に会員の読者様はこちらからログインをどうぞ。
藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

Flutter

コメントする

メールアドレスが公開されることはありません。