Unverified Commit fa6754d3 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

Fix `iconTheme` in `AppBar` doesn't apply custom `Colors.white` in the dark mode for M3 (#130574)

fixes [[Material3] AppBar does not respect `foregroundColor` or `iconTheme` for leading and actions in some cases](https://github.com/flutter/flutter/issues/130485)

### Description

- Fix `Colors.white` not applied in dark mode
- Add regression tests
- make `iconStyle` private for consistency

### Before
![Screenshot 2023-07-14 at 18 40 58](https://github.com/flutter/flutter/assets/48603081/a6caffd6-d9a1-407a-aea7-c30047bfe7c7)

### After
![Screenshot 2023-07-14 at 18 41 04](https://github.com/flutter/flutter/assets/48603081/f864da7a-2ff8-46a4-8927-591e50050502)
parent b552a0b3
...@@ -4,8 +4,6 @@ ...@@ -4,8 +4,6 @@
import 'package:flutter/painting.dart'; import 'package:flutter/painting.dart';
import 'colors.dart';
/// The minimum dimension of any interactive region according to Material /// The minimum dimension of any interactive region according to Material
/// guidelines. /// guidelines.
/// ///
...@@ -53,9 +51,11 @@ const EdgeInsets kMaterialListPadding = EdgeInsets.symmetric(vertical: 8.0); ...@@ -53,9 +51,11 @@ const EdgeInsets kMaterialListPadding = EdgeInsets.symmetric(vertical: 8.0);
/// The default color for [ThemeData.iconTheme] when [ThemeData.brightness] is /// The default color for [ThemeData.iconTheme] when [ThemeData.brightness] is
/// [Brightness.dark]. This color is used in [IconButton] to detect whether /// [Brightness.dark]. This color is used in [IconButton] to detect whether
/// [IconTheme.of(context).color] is the same as the default color of [ThemeData.iconTheme]. /// [IconTheme.of(context).color] is the same as the default color of [ThemeData.iconTheme].
const Color kDefaultIconLightColor = Colors.white; // ignore: prefer_const_constructors
final Color kDefaultIconLightColor = Color(0xFFFFFFFF);
/// The default color for [ThemeData.iconTheme] when [ThemeData.brightness] is /// The default color for [ThemeData.iconTheme] when [ThemeData.brightness] is
/// [Brightness.light]. This color is used in [IconButton] to detect whether /// [Brightness.light]. This color is used in [IconButton] to detect whether
/// [IconTheme.of(context).color] is the same as the default color of [ThemeData.iconTheme]. /// [IconTheme.of(context).color] is the same as the default color of [ThemeData.iconTheme].
const Color kDefaultIconDarkColor = Colors.black87; // ignore: prefer_const_constructors
final Color kDefaultIconDarkColor = Color(0xDD000000);
...@@ -963,9 +963,9 @@ class _IconButtonM3 extends ButtonStyleButton { ...@@ -963,9 +963,9 @@ class _IconButtonM3 extends ButtonStyleButton {
bool isIconThemeDefault(Color? color) { bool isIconThemeDefault(Color? color) {
if (isDark) { if (isDark) {
return color == kDefaultIconLightColor; return identical(color, kDefaultIconLightColor);
} }
return color == kDefaultIconDarkColor; return identical(color, kDefaultIconDarkColor);
} }
final bool isDefaultColor = isIconThemeDefault(iconTheme.color); final bool isDefaultColor = isIconThemeDefault(iconTheme.color);
final bool isDefaultSize = iconTheme.size == const IconThemeData.fallback().size; final bool isDefaultSize = iconTheme.size == const IconThemeData.fallback().size;
......
...@@ -543,7 +543,7 @@ class ThemeData with Diagnosticable { ...@@ -543,7 +543,7 @@ class ThemeData with Diagnosticable {
} }
textTheme = defaultTextTheme.merge(textTheme); textTheme = defaultTextTheme.merge(textTheme);
primaryTextTheme = defaultPrimaryTextTheme.merge(primaryTextTheme); primaryTextTheme = defaultPrimaryTextTheme.merge(primaryTextTheme);
iconTheme ??= isDark ? const IconThemeData(color: kDefaultIconLightColor) : const IconThemeData(color: kDefaultIconDarkColor); iconTheme ??= isDark ? IconThemeData(color: kDefaultIconLightColor) : IconThemeData(color: kDefaultIconDarkColor);
primaryIconTheme ??= primaryIsDark ? const IconThemeData(color: Colors.white) : const IconThemeData(color: Colors.black); primaryIconTheme ??= primaryIsDark ? const IconThemeData(color: Colors.white) : const IconThemeData(color: Colors.black);
// COMPONENT THEMES // COMPONENT THEMES
......
...@@ -1055,6 +1055,34 @@ void main() { ...@@ -1055,6 +1055,34 @@ void main() {
// one is used. This results in a difference for doubles in debugFillProperties between // one is used. This results in a difference for doubles in debugFillProperties between
// the web and the rest of Flutter's target platforms. // the web and the rest of Flutter's target platforms.
}, skip: kIsWeb); // https://github.com/flutter/flutter/issues/87364 }, skip: kIsWeb); // https://github.com/flutter/flutter/issues/87364
// This is a regression test for https://github.com/flutter/flutter/issues/130485.
testWidgets('Material3 - AppBarTheme.iconTheme correctly applies custom white color in dark mode', (WidgetTester tester) async {
final ThemeData themeData = ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
appBarTheme: const AppBarTheme(iconTheme: IconThemeData(color: Colors.white)),
);
await tester.pumpWidget(
MaterialApp(
theme: themeData,
home: Scaffold(
appBar: AppBar(
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.white);
expect(actionIconButtonColor(), Colors.white);
});
} }
AppBarTheme _appBarTheme() { AppBarTheme _appBarTheme() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment