Fix subtitleTextStyle.color isn't applied to the ListTile.subtitle in Material 2

[burakJs]

The difference between header text style and subtitle text style and the reason why it doesn't work is the code difference below. If we make the subtitle text style the same as the title text style it will work

Title Text Style

All Code

TextStyle titleStyle = titleTextStyle
    ?? tileTheme.titleTextStyle
    ?? defaults.titleTextStyle!;
  final Color? titleColor = effectiveColor;
  titleStyle = titleStyle.copyWith(
    color: titleColor,
    fontSize: _isDenseLayout(theme, tileTheme) ? 13.0 : null,
  );
  final Widget titleText = AnimatedDefaultTextStyle(
    style: titleStyle,
    duration: kThemeChangeDuration,
    child: title ?? const SizedBox(),
  );

Different Code Section

final Color? titleColor = effectiveColor;

Subtitle Text Style

All Code

subtitleStyle = subtitleTextStyle
      ?? tileTheme.subtitleTextStyle
      ?? defaults.subtitleTextStyle!;
    final Color? subtitleColor = effectiveColor
      ?? (theme.useMaterial3 ? null : theme.textTheme.bodySmall!.color);
    subtitleStyle = subtitleStyle.copyWith(
      color: subtitleColor,
      fontSize: _isDenseLayout(theme, tileTheme) ? 12.0 : null,
    );
    subtitleText = AnimatedDefaultTextStyle(
      style: subtitleStyle,
      duration: kThemeChangeDuration,
      child: subtitle!,
    );

Different Code Section

final Color? subtitleColor = effectiveColor
      ?? (theme.useMaterial3 ? null : theme.textTheme.bodySmall!.color);

Description for code

• The value theme.textTheme.bodySmall!.color is given because the effectiveColor value is null and the theme.useMaterial3 value is false

Problem solved code

All Code

subtitleStyle = subtitleTextStyle
      ?? tileTheme.subtitleTextStyle
      ?? defaults.subtitleTextStyle!;
    final Color? subtitleColor = effectiveColor;
    subtitleStyle = subtitleStyle.copyWith(
      color: subtitleColor,
      fontSize: _isDenseLayout(theme, tileTheme) ? 12.0 : null,
    );
    subtitleText = AnimatedDefaultTextStyle(
      style: subtitleStyle,
      duration: kThemeChangeDuration,
      child: subtitle!,
    );

Screenshot of the result after making the necessary change

#133412

If you had to change anything in the flutter/tests repo, include a link to the migration guide as per the breaking change policy.

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is test-exempt.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[flutter-dashboard]

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat (don't just cc him here, he won't see it! He's on Discord!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

[TahaTesser]

It looks like there are some test failures.

[burakJs]

It looks like there are some test failures.

I'm investigating and will let you know as soon as possible.

[burakJs]

• I think the failed customer_testing results are not a problem with the code change as seen in this issue Customer testing flutter_reactive_ble is failing in CI #133483

[TahaTesser]

final Color? subtitleColor = effectiveColor
    ?? (theme.useMaterial3 ? null : theme.textTheme.bodySmall!.color);

• So why do we change the color property of the subtitleTextStyle given by the user in this code?

textColor & selectedColor overrides both titleTextStyle & subtitleTextStyle, that's effectiveColor

If both text & selectedColor are null, we default to a null value so the recently added subtitleTextStyle's color can be used only for M3 and we default bodySmall color` for backward compatibility.

bodySmall!.color has been used for the subtitle in M2 as the default color and you're changing this default behavior hence the test issues.

If we still want the subtitleTextStyle color for M2 we can do this without the changing M2 default. Please apply the suggested code below and revert the default test update.

[TahaTesser]

@burakJs
With the updated fix and the default test update revert. This should work without breaking the customer test.

We'll need to test in the list_tile_theme_test.dart to land this. Update existing test if it exists.

[burakJs]

I will make changes and corrections as soon as possible. Thanks for the help and detailed explanation.

[burakJs]

• I made all the changes you mentioned.
• All tests in list_tile_theme_test .dart file pass

[TahaTesser]

#133422 (comment)

We'll need to test in the list_tile_theme_test.dart to land this. Update existing test if it exists.

Hey @burakJs
Since you're a new contributor. I've improved tests for M3 and added tests for the M2 to land this PR.
I also updated the fix itself to be much more straightforward and pushed changes myself.
I'd advise you to take a look at the changes I've made for future potential PRs.

Thank you for raising this PR.

[TahaTesser]

LGTM

[TahaTesser]

This will need a second review from @HansMuller before we land.

[HansMuller]

LGTM