Skip to content

[material_ui] Fix minimum width for Material 3 primary tab indicator - #13322

Open
hamza-flutterdev wants to merge 7 commits into
flutter:mainfrom
hamza-flutterdev:fix/material3-primary-tab-indicator-min-width
Open

hamza-flutterdev wants to merge 7 commits into
flutter:mainfrom
hamza-flutterdev:fix/material3-primary-tab-indicator-min-width

Conversation

@hamza-flutterdev

@hamza-flutterdev hamza-flutterdev commented Oct 19, 2026 •

Copy link
Copy Markdown

This change gives the default Material 3 primary TabBar indicator a minimum width of 24dp, centered on the selected label, as specified by the Material 3 tabs spec. It adds a regression test for a short tab label. Custom indicators and secondary tabs retain their existing sizing behavior.

Fixes flutter/flutter#194716

Testing

  • dart run script/tool/bin/flutter_plugin_tools.dart test --packages=material_ui — passed for all four targets: material_ui, its example, the accessibility assessments app, and gen_defaults.
  • flutter test test/tabs_test.dart — passed (204 tests), including the 24dp regression test.
  • flutter analyze lib/src/tabs.dart test/tabs_test.dart — no issues found.
  • dart format lib/src/tabs.dart test/tabs_test.dart — completed; no formatting changes were needed.

Pre-Review Checklist

@github-actions github-actions Bot added p: material_ui triage-design Should be looked at in design triage labels Oct 19, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a minimum width of 24dp for the Material 3 primary tab indicator when using the default label indicator size. It updates _IndicatorPainter to accept and enforce a minimumIndicatorWidth during painting and repainting checks, and adds a corresponding widget test to verify this behavior. There are no review comments, so no additional feedback is provided.

@fluttergithubbot

Copy link
Copy Markdown
Contributor

An existing Git SHA, e2cda364044cefe83645595c796a83f37ae8e9a8, was detected, and no actions were taken.

To re-trigger presubmits after closing or re-opeing a PR, or pushing a HEAD commit (i.e. with --force) that already was pushed before, push a blank commit (git commit --allow-empty -m "Trigger Build") or rebase to continue.

@elliette

Copy link
Copy Markdown
Member

Thanks for the contribution! You’ve checked boxes in the PR checklist above that are not reflected in this PR, so I’m assuming this is a work in progress and am marking it as a Draft. Please review the checklist, updating the PR as appropriate, and when the state of the PR as posted reflects the checklist please feel free to mark it as ready for review.

@elliette
elliette marked this pull request as draft October 27, 2026 21:24
@hamza-flutterdev hamza-flutterdev changed the title Fix minimum width for Material 3 primary tab indicator [material_ui] Fix minimum width for Material 3 primary tab indicator Oct 28, 2026
@hamza-flutterdev
hamza-flutterdev marked this pull request as ready for review October 28, 2026 05:45

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a minimum width of 24dp for primary tab indicators when using Material 3 with the default label indicator size. It updates the _IndicatorPainter to enforce this minimum width by centering the indicator if its calculated width is smaller than the minimum, and adds a corresponding widget test to verify this behavior. There are no review comments, so no additional feedback is provided.

@hamza-flutterdev

Copy link
Copy Markdown
Author

Hi @elliette, thanks for the guidance. I’ve updated the PR title and description, added the material_ui pending changelog entry and reviewed the checklist. The PR is now ready for review.

The full material_ui test command passed all four targets. The focused tabs_test.dart run passed all 204 tests, including the new regression test and analysis reported no issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

p: material_ui triage-design Should be looked at in design triage

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Material 3] Support 24dp minimum width for Primary TabBar active indicator and allow theming primary vs. secondary tab indicators in TabBarThemeData

3 participants