· Flutter

Flutterでバックボタンの色を変更するには

  • このエントリーをはてなブックマークに追加

FlutterでたとえばNavigator.pushした先の画面で、バックボタンを表示しているとき、そのボタンのカラーを変えたい。

たとえば、下図の例では白色に変えていますが、このようにしたいという話です。

何もしなかったら、下図のように黒色になります(正確には primaryColor によって、黒か白か決まります1)。

その色を変更する方法として、AppBariconTheme を設定できますので、そこに次のようにIconThemeData を使って変更したいカラーを設定します。

    return Scaffold(
      appBar: AppBar(
        title: Text("プロフィールの編集"),
        iconTheme: IconThemeData(color: Colors.white), // ここで色を決めることができる。

ただ、これだと、画面ごとに毎回設定しなくてはならないので、アプリ全体として設定したくなると思います。それをするには、

MaterialApp(
    theme: ThemeData(
        primaryColor: AppColors.appBar,
        primaryTextTheme: TextTheme(title: TextStyle(color: Colors.white)),
        primaryIconTheme: IconThemeData(color: Colors.white), // ここを追加

のように、MaterialAppthemeThemeData を設定できますが、さらに ThemeDataprimaryIconTheme でバックボタンのカラー設定することで、アプリ全体のカラーを変更することができます。

ちなみに、両方(MaterialAppprimaryIconThemeと、AppBariconThemeの両方)を設定していた場合、AppBarで設定したiconThemeが優先されます。


  1. theme_data.dart を参照ください。primaryIconThemeprimaryIsDark によって白か黒かを決めていて、primaryIsDarkestimateBrightnessForColor(primaryColor)primaryColorによって決まっているのが分かるかと思います。 [return]
  • このエントリーをはてなブックマークに追加
  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket