Skip to content

Fix divider width in scrollable TabBar for Material 3 and add dividerHeight parameter #123127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
auto-submit merged 2 commits into from
Mar 27, 2023
Merged

Fix divider width in scrollable TabBar for Material 3 and add dividerHeight parameter #123127

auto-submit merged 2 commits into from
Mar 27, 2023

Conversation

@TahaTesser
Copy link
Member

@TahaTesser TahaTesser commented Mar 21, 2023 •
edited
Loading

Blocked on #122756

fixes #117722

Description

  1. This PR makes the tab bar take the full width for the divider by putting in a Stack. (This will produce golden changes)
  2. Add dividerHeight default and parameter.

Before

Group 11

After

Group 10

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 flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. c: contributor-productivity Team-specific productivity, code health, technical debt. labels Mar 21, 2023
@TahaTesser TahaTesser changed the title Fix divider width in scrollable TabBar for Material 3 i and add dividerHeight parameter Fix divider width in scrollable TabBar for Material 3 and add dividerHeight parameter Mar 21, 2023
@TahaTesser TahaTesser force-pushed the fix_tab_bar_divider_m3 branch from 884db20 to fc9abc7 Compare March 21, 2023 16:07
@TahaTesser TahaTesser requested a review from Piinks March 21, 2023 16:33
@flutter-dashboard
Copy link

flutter-dashboard bot commented Mar 21, 2023

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

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

Changes reported for pull request #123127 at sha fc9abc794e0b3b5fe2cae89e8835322682c440e4

@flutter-dashboard flutter-dashboard bot added the will affect goldens Changes to golden files label Mar 21, 2023
@TahaTesser TahaTesser force-pushed the fix_tab_bar_divider_m3 branch from fc9abc7 to 6ca5e3a Compare March 22, 2023 13:50
@flutter-dashboard
Copy link

flutter-dashboard bot commented Mar 22, 2023

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

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

Changes reported for pull request #123127 at sha 6ca5e3af11a915c6891d9769e9cfc33d810e025d

@Piinks Piinks mentioned this pull request Mar 22, 2023
Merged
8 tasks
Piinks
Piinks reviewed Mar 22, 2023
View reviewed changes
packages/flutter/lib/src/material/tabs.dart Outdated
Copy link
Contributor

@Piinks Piinks Mar 22, 2023

Choose a reason for hiding this comment

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

Just for follow up after #122756, I assume this will need to be updated the for M3 defaults for primary & secondary.

Copy link
Member Author

@TahaTesser TahaTesser Mar 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Yes, I will update this PR immediately once #122756 land. As tthere will be conflict in the defaults test and as you pointed out, I will add dividerHeight in secondary defaults as well.

Copy link
Member Author

@TahaTesser TahaTesser Mar 24, 2023

Choose a reason for hiding this comment

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

  • Resolved conflicts,
  • updated default tests
  • modified an existing duplicate test for the secondary tab bar golden
  • Updated underline indicator to shift so I can align with the divider.

@TahaTesser TahaTesser force-pushed the fix_tab_bar_divider_m3 branch from 6ca5e3a to c9de5d1 Compare March 24, 2023 15:46
@TahaTesser TahaTesser requested a review from Piinks March 24, 2023 16:23
@flutter-dashboard
Copy link

flutter-dashboard bot commented Mar 24, 2023

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

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

Changes reported for pull request #123127 at sha c9de5d1dce8a6bc41211a475eb4f1352cb5a5ebf

@TahaTesser TahaTesser force-pushed the fix_tab_bar_divider_m3 branch from c9de5d1 to 536112c Compare March 27, 2023 19:07
@TahaTesser
Copy link
Member Author

TahaTesser commented Mar 27, 2023

Rebasing this for any conflict and updated tests. This is ready to review.

@flutter-dashboard
Copy link

flutter-dashboard bot commented Mar 27, 2023

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

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

Changes reported for pull request #123127 at sha 536112c

Piinks
Piinks approved these changes Mar 27, 2023
View reviewed changes
Copy link
Contributor

@Piinks Piinks left a comment

Choose a reason for hiding this comment

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

LGTM - approved goldens. 👍

@Piinks Piinks added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 27, 2023
@auto-submit auto-submit bot merged commit 3512c2c into flutter:master Mar 27, 2023
@TahaTesser TahaTesser deleted the fix_tab_bar_divider_m3 branch March 28, 2023 06:02
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Mar 28, 2023
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2023
@engine-flutter-autoroll
3512c2c Fix divider width in scrollable TabBar for Material 3 and a…
49bdfdb 
…dd `dividerHeight` parameter (flutter/flutter#123127)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Mar 28, 2023
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2023
@engine-flutter-autoroll
3512c2c Fix divider width in scrollable TabBar for Material 3 and a…
08618f2 
…dd `dividerHeight` parameter (flutter/flutter#123127)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Mar 28, 2023
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2023
@engine-flutter-autoroll
3512c2c Fix divider width in scrollable TabBar for Material 3 and a…
ddb2110 
…dd `dividerHeight` parameter (flutter/flutter#123127)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Mar 28, 2023
Merged
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2023
@engine-flutter-autoroll
3512c2c Fix divider width in scrollable TabBar for Material 3 and a…
2bb2af3 
…dd `dividerHeight` parameter (flutter/flutter#123127)
Piinks added a commit that referenced this pull request Mar 28, 2023
@Piinks
Revert "Fix divider width in scrollable TabBar for Material 3 and a…
30286af 
…dd `dividerHeight` parameter (#123127)"

This reverts commit 3512c2c.
@Piinks Piinks mentioned this pull request Mar 28, 2023
Merged
@auto-submit auto-submit bot mentioned this pull request Mar 28, 2023
Closed
auto-submit bot pushed a commit that referenced this pull request Mar 28, 2023
@Piinks
Revert "Fix divider width in scrollable TabBar for Material 3 and a…
3dfc60c 
…dd `dividerHeight` parameter (#123127)" (#123616)

Revert "Fix divider width in scrollable `TabBar` for  Material 3 and add `dividerHeight` parameter"
@reidbaker reidbaker mentioned this pull request Mar 28, 2023
Merged
8 tasks
@HansMuller HansMuller mentioned this pull request Mar 31, 2023
Closed
@reidbaker reidbaker mentioned this pull request Apr 1, 2023
Merged
8 tasks
@TahaTesser TahaTesser mentioned this pull request Apr 5, 2023
Closed
@reidbaker reidbaker mentioned this pull request Apr 5, 2023
Merged
8 tasks
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 10, 2023
@engine-flutter-autoroll
3512c2c Fix divider width in scrollable TabBar for Material 3 and a…
b866180 
…dd `dividerHeight` parameter (flutter/flutter#123127)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 10, 2023
@engine-flutter-autoroll
3512c2c Fix divider width in scrollable TabBar for Material 3 and a…
e26b12d 
…dd `dividerHeight` parameter (flutter/flutter#123127)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Piinks Piinks Piinks approved these changes

Assignees

No one assigned

Labels

autosubmit Merge PR when tree becomes green via auto submit App c: contributor-productivity Team-specific productivity, code health, technical debt. f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. will affect goldens Changes to golden files

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Material 3 TabBar does not take full width when isScrollable: true

2 participants

@TahaTesser @Piinks