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

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

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

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

その色を変更する方法として、AppBar に iconTheme を設定できますので、そこに次のように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), // ここを追加

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

ちなみに、両方（MaterialAppでprimaryIconThemeと、AppBarでiconThemeの両方）を設定していた場合、AppBarで設定したiconThemeが優先されます。

theme_data.dart を参照ください。primaryIconTheme は primaryIsDark によって白か黒かを決めていて、primaryIsDarkは estimateBrightnessForColor(primaryColor) と primaryColorによって決まっているのが分かるかと思います。 ↩︎

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

CATALOG

FEATURED TAGS