PCロール

PCロール

【Flutter】ページを戻ってもナビゲーションバーの色が変わらない問題の解決方法

【Flutter】ページを戻ってもナビゲーションバーの色が変わらない問題の解決方法

この記事は、Gajeroll Advent Calendar 2022 の17日目の記事です。

今回は、Flutterで開発する際に、ページ遷移からもとのページに戻ったものの、ナビゲーションバーが思い通りの色にならない問題の解決方法を紹介します。

結論

push()の後に、ナビゲーションバーの色を指定する処理を追加しましょう。

onPressed: () {
  Navigator.of(context).push(MaterialPageRoute(
    // Hogeに遷移する場合
    // builder: (context) => Hoge(
    //   ...
    // ),
  ))
  // このページに戻ってきた直後にナビゲーションバーを青にする
      .then((value) {
    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.blue,
      ),
    );
  });
}

解説

もとのページに戻った直後に行うべき処理を、push()の後に追加することができます。

onPressed: () {
  Navigator.of(context).push(MaterialPageRoute(
    // ページ遷移
    // ...
  ))
  // このページに戻ってきた直後の処理
  .then((value) {
    // ここに処理を書く
 });
}

.push().then()とすることで、このページから別のページに移動し、再度このページに戻ってきた直後に実行したい処理を書くことができます。実行したい処理内容は、.then()の中に書きましょう。

今回は、ここにナビゲーションバーの色を指定する処理を書くのですが、これについては以下の記事をご覧ください。

Flutterでのナビゲーションバーの色設定方法

さいごに

最後までご覧いただきありがとうございます。 PC ロールでは、テクノロジーに関する情報をまとめて発信しています。 また、おすすめのガジェットについて幅広く紹介していく、ガジェロールもあります。 ガジェットやソフトを使うエンジニア・クリエイターはぜひご覧ください。

← Back to home