[Material3] AppBar does not respect foregroundColor or iconTheme for leading and actions in some cases

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Create a new empty MaterialApp with Scaffold and AppBar.
Set foregroundColor to Colors.black87 in light theme, or Colors.white in dark theme. (Those are the kDefaultIconLightColor and kDefaultIconDarkColor).
Set ThemeData with useMaterial3: true.
Add some leading or actions to AppBar. For example: leading: IconButton(icon: const Icon(Icons.menu), onPressed: () {}),

Expected results

When we set foregroundColor or iconTheme in AppBar to Colors.black87 in Light mode, or Colors.white in Dark mode, this color should be used for leading and action buttons.

Actual results

foregroundColor or iconTheme set in AppBar is ignored, and the default ColorScheme onSurfaceVariant color is used instead.

Code sample

This is code for a simple app to test the issue:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: const ColorScheme.dark().copyWith(onSurfaceVariant: Colors.red),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          foregroundColor: Colors.white, // This color is ignored and icons are red!
          iconTheme: const IconThemeData(color: Colors.white), // This color is also ignored and icons are red!
          leading: IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
          actions: <Widget>[
            IconButton(icon: const Icon(Icons.add), onPressed: () {}),
          ],
        ),
      ),
    );
  }
}

Test

This is slightly edited code from app_bar_test.dart. This test will fail with Colors.black87, but is successful with any other color.

testWidgets('The foregroundColor property of the AppBar overrides any IconButtonTheme present in the theme - M3', (WidgetTester tester) async {
  final ThemeData themeData = ThemeData(useMaterial3: true);

  await tester.pumpWidget(
    MaterialApp(
      theme: themeData,
      home: Scaffold(
        appBar: AppBar(
          foregroundColor: Colors.black87,
          leading: IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
          actions: <Widget>[
            IconButton(icon: const Icon(Icons.add), onPressed: () {}),
          ],
        ),
      ),
    ),
  );

  Color? leadingIconButtonColor() => iconStyle(tester, Icons.menu)?.color;
  Color? actionIconButtonColor() => iconStyle(tester, Icons.add)?.color;

  expect(leadingIconButtonColor(), Colors.black87);
  expect(actionIconButtonColor(), Colors.black87);
});

Screenshots or Video

Screenshots / Video demonstration

Unsuccessful test:

Successful test:

Wrong color set in sample app:

Logs

No response

Flutter Doctor output

Doctor output

[✓] Flutter (Channel master, 3.13.0-3.0.pre.21, on Linux Mint 21.1 5.19.0-46-generic, locale cs_CZ.UTF-8)
    • Flutter version 3.13.0-3.0.pre.21 on channel master at /home/helu/Software/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 47ba59c762 (8 hours ago), 2023-07-12 20:46:57 -0400
    • Engine revision 1b1ccdd1f5
    • Dart version 3.1.0 (build 3.1.0-302.0.dev)
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /home/helu/Software/android-sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = /home/helu/Software/android-sdk/
    • Java binary at: /home/helu/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.9971841/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 14.0.0-1ubuntu1
    • cmake version 3.22.1
    • ninja version 1.10.1
    • pkg-config version 0.29.2

[✓] Android Studio (version 2022.2)
    • Android Studio at /home/helu/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.10121639
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[!] Android Studio (version unknown)
    • Android Studio at /home/helu/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.9971841
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to determine Android Studio version.
    • android-studio-dir = /home/helu/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.9971841
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.80.0)
    • VS Code at /usr/share/code
    • Flutter extension version 3.68.0

[✓] Connected device (3 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
    • Linux (desktop)              • linux         • linux-x64      • Linux Mint 21.1 5.19.0-46-generic
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 114.0.5735.198
    ! Device R3CT30WFRLD is not authorized.
      You might need to check your device for an authorization dialog.

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.```

</details>

@HE-LU

Hi @HE-LU. Thanks for filing this issue. I'm able to reproduce this on the latest master and stable channels.

flutter doctor -v

[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4 22F66 darwin-arm64, locale
    en-NG)
    • Flutter version 3.10.6 on channel stable at /Users/dammya/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f468f3366c (11 hours ago), 2023-07-12 15:19:05 -0700
    • Engine revision cdbeda788a
    • Dart version 3.0.6
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version
    32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/dammya/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.79.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (5 available)
    • sdk gphone arm64 (mobile)  • emulator-5554                            •
      android-arm64  • Android 11 (API 30) (emulator)
    • Damilola’s iPhone (mobile) • 71c843fa5f3dec767999f36224653c0faa78660e •
      ios            • iOS 16.5 20F66
    • iPhone 14 Pro (mobile)     • DCF2031A-7EA9-42FF-8CD4-D4584F3E7A6D     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-arm64   • macOS 13.4 22F66 darwin-arm64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 114.0.5735.198

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[✓] Flutter (Channel master, 3.13.0-3.0.pre.21, on macOS 13.4 22F66 darwin-arm64, locale en-NG)
    • Flutter version 3.13.0-3.0.pre.21 on channel master at /Users/dammya/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 47ba59c762 (9 hours ago), 2023-07-12 20:46:57 -0400
    • Engine revision 1b1ccdd1f5
    • Dart version 3.1.0 (build 3.1.0-302.0.dev)
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/dammya/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.79.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (5 available)
    • sdk gphone arm64 (mobile)  • emulator-5554                            • android-arm64  • Android 11 (API 30) (emulator)
    • Damilola’s iPhone (mobile) • 71c843fa5f3dec767999f36224653c0faa78660e • ios            • iOS 16.5 20F66
    • iPhone 14 Pro (mobile)     • DCF2031A-7EA9-42FF-8CD4-D4584F3E7A6D     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)            • macos                                    • darwin-arm64   • macOS 13.4 22F66 darwin-arm64
    • Chrome (web)               • chrome                                   • web-javascript • Google Chrome 114.0.5735.198

[✓] Network resources
    • All expected network resources are available.

• No issues found!

      iconTheme: const IconThemeData(color: Colors.white), // This color is also ignored and icons are red!

For some reason fallback to IconTheme.merge fails only with Colors.white, other colors work fine.

When printing color inside IconThemeData.merge

`Colors.white` (as you can see here last color is not white)

`Colors.green` (as you can see here all other colors are same, green)

@QuncCccccc

CC @QuncCccccc

I think there are some problems when we compare the default color objects in icon_button.dart. The comparison only compares the value instead of objects.

(A little context why I added this code) When we have an IconButton and also provide a IconTheme, we want IconButton to respect IconTheme.color and IconTheme.size if they are not null. But IconTheme always has a fallback when we call IconTheme.of(context), and will prevent IconButton to have its own defaults. So we added that check.

Fix:
We should change the method to:

bool isIconThemeDefault(Color? color) {
  if (isDark) {
    return identical(color, kDefaultIconLightColor);
  }
  return identical(color, kDefaultIconDarkColor);
}

And also we need to update the declaration of kDefaultIconLightColor and kDefaultIconDarkColor to

// ignore: prefer_const_constructors
final Color kDefaultIconLightColor = Color(0xFFFFFFFF);

// ignore: prefer_const_constructors
final Color kDefaultIconDarkColor = Color(0xDD000000);

Using const will point to same object.

@QuncCccccc

Thanks, @QuncCccccc! I'll take a look into this and write tests for the PR.

Fix `iconTheme` in `AppBar` doesn't apply custom `Colors.white` in th…

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

[Material3] AppBar does not respect `foregroundColor` or `iconTheme` for leading and actions in some cases #130485

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Test

Screenshots or Video

Logs

Flutter Doctor output

1 remaining item

`Colors.white` (as you can see here last color is not white)

`Colors.green` (as you can see here all other colors are same, green)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Material3] AppBar does not respect foregroundColor or iconTheme for leading and actions in some cases #130485

Description

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Test

Screenshots or Video

Logs

Flutter Doctor output

Activity

dam-ease commented on Jul 13, 2023

1 remaining item

TahaTesser commented on Jul 13, 2023

Colors.white (as you can see here last color is not white)

Colors.green (as you can see here all other colors are same, green)

HansMuller commented on Jul 13, 2023

QuncCccccc commented on Jul 13, 2023

TahaTesser commented on Jul 14, 2023

github-actions commented on Aug 1, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[Material3] AppBar does not respect `foregroundColor` or `iconTheme` for leading and actions in some cases #130485

`Colors.white` (as you can see here last color is not white)

`Colors.green` (as you can see here all other colors are same, green)