Fix `TabBar` tab icons not respecting custom `IconTheme` #157724

TahaTesser · 2024-10-28T15:12:37Z

Fixes TabBar ignores Theme's iconTheme.size

Description

When ThemeData.IconTheme with color and size, is provided, it can override the default Tab icon color and size.

Code sample

expand to view the code sample

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(
        iconTheme: const IconThemeData(color: Colors.amber, size: 40),
      ),
      home: const Scaffold(
        body: SafeArea(
          child: DefaultTabController(
            length: 2,
            child: Column(
              children: [
                TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.backpack_outlined), text: 'Backpack'),
                    Tab(icon: Icon(Icons.map_outlined), text: 'Map'),
                  ],
                  overlayColor: WidgetStatePropertyAll(Colors.transparent),
                ),
                Expanded(
                  child: TabBarView(
                    children: [
                      Icon(Icons.backpack_outlined),
                      Icon(Icons.map_outlined),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

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

nate-thegrate

LGTM, with an optional suggestion.

Thanks for making the improvement here!

nate-thegrate · 2024-10-29T00:10:16Z

packages/flutter/test/material/tabs_test.dart

+    // The iconTheme color isn't applied to the selected icon.
+    expect(iconStyle(tester, selectedIcon).color, equals(theme.colorScheme.primary));
+    // The iconTheme color is applied to the unselected icon.
+    expect(iconStyle(tester, unselectedIcon).color, equals(theme.iconTheme.color));
+
+    // Both selected and unselected icons should have the iconTheme size.
+    expect(
+      tester.getSize(find.byIcon(selectedIcon)),
+      Size(theme.iconTheme.size!, theme.iconTheme.size!),
+    );
+    expect(
+      tester.getSize(find.byIcon(unselectedIcon)),
+      Size(theme.iconTheme.size!, theme.iconTheme.size!),
+    );


This test looks phenomenal ❤️

nate-thegrate · 2024-10-29T00:13:50Z

packages/flutter/lib/src/material/tabs.dart

+  MaterialStateColor _resolveWithLabelColor({
+    required BuildContext context,
+    IconThemeData? iconTheme,
+  }) {


nit: could we make the build context a positional arg?

Suggested change

MaterialStateColor _resolveWithLabelColor({

required BuildContext context,

IconThemeData? iconTheme,

}) {

MaterialStateColor _resolveWithLabelColor(

BuildContext context, {

IconThemeData? iconTheme,

}) {

It would reduce verbosity and would be consistent with methods like InheritedModel.inheritFrom and Navigator.of.
Not a strong preference though :)

TahaTesser · 2024-10-29T10:25:35Z

Reported the weird bot label issue on Discord.

…tter/flutter#157724)

flutter/flutter@3fb95c7...42132e8 2024-10-29 [email protected] Reland "Upgrade tests to AGP 8.7/Gradle 8.10.2/Kotlin 1.8.10" (flutter/flutter#157617) 2024-10-29 [email protected] [impeller] re-enable impeller shard. (flutter/flutter#157806) 2024-10-29 [email protected] Roll Flutter Engine from 4cb4478016b5 to 725c8e4bc379 (1 revision) (flutter/flutter#157808) 2024-10-29 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Avoid labeling 'context' PRs as 'text-input' (#157650)" (flutter/flutter#157812) 2024-10-29 [email protected] Roll Flutter Engine from b95da8106b98 to 4cb4478016b5 (1 revision) (flutter/flutter#157792) 2024-10-29 [email protected] Remove unused import from kt plugin template (flutter/flutter#157220) 2024-10-29 [email protected] Roll Flutter Engine from 5fa7a123b14a to b95da8106b98 (1 revision) (flutter/flutter#157787) 2024-10-29 [email protected] Fix `TabBar` tab icons not respecting custom `IconTheme` (flutter/flutter#157724) 2024-10-29 [email protected] Roll Flutter Engine from 0c8f0bf4d740 to 5fa7a123b14a (1 revision) (flutter/flutter#157780) 2024-10-29 [email protected] Allow customizing entry mode icons in TimePicker (flutter/flutter#157151) 2024-10-29 [email protected] Add test for `focus_scope.0.dart` (flutter/flutter#157772) 2024-10-29 [email protected] Add test for `page_storage.0.dart` (flutter/flutter#157770) 2024-10-29 [email protected] Roll Flutter Engine from c05af6f939fc to 0c8f0bf4d740 (1 revision) (flutter/flutter#157774) 2024-10-29 [email protected] Roll Flutter Engine from b394e0c98fa0 to c05af6f939fc (1 revision) (flutter/flutter#157767) 2024-10-29 [email protected] Add test for `nested_scroll_view_state.0.dart` (flutter/flutter#157714) 2024-10-29 [email protected] Pin Mac tool_integration_test shards to arm64 (flutter/flutter#157760) 2024-10-29 [email protected] Roll Flutter Engine from ed587dcf61fd to b394e0c98fa0 (4 revisions) (flutter/flutter#157766) 2024-10-28 [email protected] Roll Flutter Engine from 70671baabbba to ed587dcf61fd (10 revisions) (flutter/flutter#157751) 2024-10-28 [email protected] Roll Flutter Engine from 23b2c6d3b3b1 to 70671baabbba (1 revision) (flutter/flutter#157740) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…tter/flutter#157724)

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Oct 28, 2024

nate-thegrate approved these changes Oct 29, 2024

View reviewed changes

TahaTesser added 2 commits October 29, 2024 12:15

Fix TabBar tab icons not respecting custom IconTheme

6f229c1

Address feedback

9d7cf72

TahaTesser force-pushed the fix_tabs_icon_iconTheme branch from e703080 to 9d7cf72 Compare October 29, 2024 10:17

github-actions bot added the a: text input Entering text in a text field or keyboard related problems label Oct 29, 2024

TahaTesser removed the a: text input Entering text in a text field or keyboard related problems label Oct 29, 2024

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Oct 29, 2024

auto-submit bot merged commit 97596e5 into flutter:master Oct 29, 2024
73 checks passed

TahaTesser deleted the fix_tabs_icon_iconTheme branch October 29, 2024 11:24

engine-flutter-autoroll mentioned this pull request Oct 29, 2024

Roll Flutter from 3fb95c7dd21d to f935e5358714 (13 revisions) flutter/packages#7952

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Oct 29, 2024

97596e5 Fix TabBar tab icons not respecting custom IconTheme (flu…

f7827d7

…tter/flutter#157724)

engine-flutter-autoroll mentioned this pull request Oct 29, 2024

Roll Flutter from 3fb95c7dd21d to ebc80f01645d (15 revisions) flutter/packages#7954

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Oct 29, 2024

97596e5 Fix TabBar tab icons not respecting custom IconTheme (flu…

85f2aa0

…tter/flutter#157724)

jmagman mentioned this pull request Oct 29, 2024

Avoid labeling 'context' PRs as 'text-input' #157650

Merged

9 tasks

engine-flutter-autoroll mentioned this pull request Oct 29, 2024

Roll Flutter from 3fb95c7dd21d to 64e0f6a57bc3 (16 revisions) flutter/packages#7957

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Oct 29, 2024

97596e5 Fix TabBar tab icons not respecting custom IconTheme (flu…

e65e8a2

…tter/flutter#157724)

engine-flutter-autoroll mentioned this pull request Oct 29, 2024

Roll Flutter from 3fb95c7dd21d to 42132e879b42 (19 revisions) flutter/packages#7958

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Oct 29, 2024

97596e5 Fix TabBar tab icons not respecting custom IconTheme (flu…

9ecbbdc

…tter/flutter#157724)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 12, 2025

97596e5 Fix TabBar tab icons not respecting custom IconTheme (flu…

2ca74e9

…tter/flutter#157724)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025

97596e5 Fix TabBar tab icons not respecting custom IconTheme (flu…

263222f

…tter/flutter#157724)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025

97596e5 Fix TabBar tab icons not respecting custom IconTheme (flu…

4c3c793

…tter/flutter#157724)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 6, 2025

97596e5 Fix TabBar tab icons not respecting custom IconTheme (flu…

ccac453

…tter/flutter#157724)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 7, 2025

97596e5 Fix TabBar tab icons not respecting custom IconTheme (flu…

f794980

…tter/flutter#157724)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix `TabBar` tab icons not respecting custom `IconTheme` #157724

Fix `TabBar` tab icons not respecting custom `IconTheme` #157724

Uh oh!

TahaTesser commented Oct 28, 2024 •

edited

Loading

Uh oh!

nate-thegrate left a comment

Uh oh!

nate-thegrate Oct 29, 2024

Uh oh!

nate-thegrate Oct 29, 2024

Uh oh!

TahaTesser commented Oct 29, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix TabBar tab icons not respecting custom IconTheme #157724

Fix TabBar tab icons not respecting custom IconTheme #157724

Uh oh!

Conversation

TahaTesser commented Oct 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Code sample

Pre-launch Checklist

Uh oh!

nate-thegrate left a comment

Choose a reason for hiding this comment

Uh oh!

nate-thegrate Oct 29, 2024

Choose a reason for hiding this comment

Uh oh!

nate-thegrate Oct 29, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser commented Oct 29, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix `TabBar` tab icons not respecting custom `IconTheme` #157724

Fix `TabBar` tab icons not respecting custom `IconTheme` #157724

TahaTesser commented Oct 28, 2024 •

edited

Loading