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で作ってるとすれば、

Widget build(BuildContext context) {
return MaterialApp(
title: 'マイ・フォーム・テスト',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: FormScreen(),
);
}

FormScreenではこうします。

 


Widget build(BuildContext context) { const appTitle = 'フォームテスト'; return Scaffold( appBar: AppBar( title: const Text(appTitle), ), body: const MyCustomForm(), ); }

 

これで動くようになります。

 

参考

 

 

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

Flutter

コメントする

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