Fix Material 3 Scrollable `TabBar` #125974

TahaTesser · 2023-05-03T13:10:24Z

Description

Fix the divider doesn't stretch to take all the available width in the scrollable tab bar in M3
Add dividerHeight property.
Update the default tab alignment for the scrollable tab bar to match the specs (this is backward compatible for M2 with the new tabAlignment property).

Bug (default tab alignment)

Fix (default tab alignment)

Code sample

code sample

import 'package:flutter/material.dart';

/// Flutter code sample for [TabBar].

void main() => runApp(const TabBarApp());

class TabBarApp extends StatelessWidget {
  const TabBarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //  tabBarTheme: const TabBarTheme(tabAlignment: TabAlignment.start),
          useMaterial3: true,
      ),
      home: const TabBarExample(),
    );
  }
}

class TabBarExample extends StatefulWidget {
  const TabBarExample({super.key});

  @override
  State<TabBarExample> createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample> {
  bool rtl = false;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Directionality(
        textDirection:  rtl ? TextDirection.rtl : TextDirection.ltr,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('TabBar Sample'),
          ),
          body: const Column(
            children: <Widget>[
              Text('Scrollable-TabAlignment.start'),
              TabBar(
                isScrollable: true,
                tabAlignment: TabAlignment.start,
                tabs: <Widget>[
                  Tab(
                    icon: Icon(Icons.cloud_outlined),
                  ),
                  Tab(
                    icon: Icon(Icons.beach_access_sharp),
                  ),
                  Tab(
                    icon: Icon(Icons.brightness_5_sharp),
                  ),
                ],
              ),
              Text('Scrollable-TabAlignment.startOffset'),
              TabBar(
                isScrollable: true,
                tabAlignment: TabAlignment.startOffset,
                tabs: <Widget>[
                  Tab(
                    icon: Icon(Icons.cloud_outlined),
                  ),
                  Tab(
                    icon: Icon(Icons.beach_access_sharp),
                  ),
                  Tab(
                    icon: Icon(Icons.brightness_5_sharp),
                  ),
                ],
              ),
              Text('Scrollable-TabAlignment.center'),
              TabBar(
                isScrollable: true,
                tabAlignment: TabAlignment.center,
                tabs: <Widget>[
                  Tab(
                    icon: Icon(Icons.cloud_outlined),
                  ),
                  Tab(
                    icon: Icon(Icons.beach_access_sharp),
                  ),
                  Tab(
                    icon: Icon(Icons.brightness_5_sharp),
                  ),
                ],
              ),
              Spacer(),
              Text('Non-scrollable-TabAlignment.fill'),
              TabBar(
                tabAlignment: TabAlignment.fill,
                tabs: <Widget>[
                  Tab(
                    icon: Icon(Icons.cloud_outlined),
                  ),
                  Tab(
                    icon: Icon(Icons.beach_access_sharp),
                  ),
                  Tab(
                    icon: Icon(Icons.brightness_5_sharp),
                  ),
                ],
              ),
              Text('Non-scrollable-TabAlignment.center'),
              TabBar(
                tabAlignment: TabAlignment.center,
                tabs: <Widget>[
                  Tab(
                    icon: Icon(Icons.cloud_outlined),
                  ),
                  Tab(
                    icon: Icon(Icons.beach_access_sharp),
                  ),
                  Tab(
                    icon: Icon(Icons.brightness_5_sharp),
                  ),
                ],
              ),
              Spacer(),
            ],
          ),
          floatingActionButton: FloatingActionButton.extended(
            onPressed: () {
              setState(() {
                rtl = !rtl;
              });
            },
            label: const Text('Switch Direction'),
            icon: const Icon(Icons.swap_horiz),
          ),
        ),
      ),
    );
  }
}

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.

Piinks

Looks like there are a bunch o failing checks currently, is that because it is waiting on #125883?

TahaTesser · 2023-05-05T14:04:08Z

Looks like there are a bunch o failing checks currently, is that because it is waiting on #125883?

Yep, this is not expected to be clear until #125883 is merged. I've split this and tested it locally.

packages/flutter/test/material/tabs_test.dart

dev/tools/gen_defaults/lib/tabs_template.dart

flutter-dashboard · 2023-05-05T16:21:14Z

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 #125974 at sha ecd52c86c76f5811fce270b3360ef79175ff92d3

flutter-dashboard · 2023-05-09T21:25:17Z

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 #125974 at sha e1cfe2c5d11dca14ed70feb97913ba07578a50fe

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

Piinks

LGTM with the switch statement nit outstanding. I will fire off some extra internal tests, hold off on merging right away. :)

flutter-dashboard · 2023-05-09T23:07:29Z

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 #125974 at sha b99eb8a55c07d64491e603a12f0820477cab6df3

Piinks · 2023-05-11T14:00:48Z

There are some affected customers here, one of them seeing a change in alignment with this change. Working with them now to update the code or find out if it is an acceptable update for them.

flutter-dashboard · 2023-05-15T15:50:35Z

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 #125974 at sha dd12712

Piinks · 2023-05-15T22:01:53Z

I am working on migrating customers here. For now, can you hold off on pushing any commits? The Google tests throw out the old result when a new commit is pushed. 😋

Piinks · 2023-05-15T22:07:41Z

In the meantime, I think a short migration guide in flutter/website is warranted here. When folks upgrade to this and the tab bar moves, it may not be easy to figure out why or how to restore it.

TahaTesser · 2023-05-16T13:55:56Z

In the meantime, I think a short migration guide in flutter/website is warranted here. When folks upgrade to this and the tab bar moves, it may not be easy to figure out why or how to restore it.

Great idea, I'll work on this.

TahaTesser · 2023-05-17T14:23:30Z

In the meantime, I think a short migration guide in flutter/website is warranted here. When folks upgrade to this and the tab bar moves, it may not be easy to figure out why or how to restore it.

Great idea, I'll work on this.

Filed a PR for migration guide flutter/website#8700

TahaTesser · 2023-06-22T08:50:07Z

@Piinks
Mystery solved!

#128725 recently updated the useMaterial3 flag in the boilerplate code to be nullable in the material library for M3.
I just had to explicitly enable theme.useMaterial3 for the M3 tests in this PR.

TahaTesser · 2023-06-22T09:53:02Z

Linux flutter_plugins is failing on most PRs right now.

�[31mThe following packages had errors:�[0m
�[31m  file_selector/file_selector�[0m
�[31m  file_selector_linux�[0m
�[31m  file_selector_macos�[0m
�[31m  file_selector_windows�[0m
�[31mSee above for full details.�[0m

HansMuller

LGTM

flutter-dashboard · 2023-06-22T16:38:31Z

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 #125974 at sha c91ef14

flutter/flutter@c40baf4...042c036 2023-06-22 [email protected] Remove unnecessary variable `_hasPrimaryFocus` (flutter/flutter#129066) 2023-06-22 [email protected] Fix Material 3 Scrollable `TabBar` (flutter/flutter#125974) 2023-06-22 [email protected] Fix: Closing bottom sheet and removing FAB cause assertion failure (flutter/flutter#128566) 2023-06-22 [email protected] Add `InputDecorationTheme.merge` (flutter/flutter#129011) 2023-06-22 [email protected] Roll Packages from 9af50d4 to 95bc1c6 (6 revisions) (flutter/flutter#129351) 2023-06-22 [email protected] Prevent crashes on range errors when selecting device (flutter/flutter#129290) 2023-06-22 [email protected] Revert "Roll Flutter Engine from 703c9a14ac7f to 8cc6d6d5efdb (1 revision)" (flutter/flutter#129353) 2023-06-22 [email protected] Roll Flutter Engine from 703c9a14ac7f to 8cc6d6d5efdb (1 revision) (flutter/flutter#129339) 2023-06-22 [email protected] Roll Flutter Engine from d9530e2b87de to 703c9a14ac7f (1 revision) (flutter/flutter#129337) 2023-06-22 [email protected] Roll Flutter Engine from c6251a69a09a to d9530e2b87de (1 revision) (flutter/flutter#129334) 2023-06-22 [email protected] Roll Flutter Engine from 08aaa88bf67f to c6251a69a09a (10 revisions) (flutter/flutter#129331) 2023-06-22 [email protected] Manual roll of packages to 9af50d4 (flutter/flutter#129328) 2023-06-21 [email protected] Roll Flutter Engine from 090fae83548a to 08aaa88bf67f (3 revisions) (flutter/flutter#129306) 2023-06-21 [email protected] [framework,web] add FlutterTimeline and semantics benchmarks that use it (flutter/flutter#128366) 2023-06-21 [email protected] Roll pub packages (flutter/flutter#128966) 2023-06-21 [email protected] Remove incorrect non-nullable assumption from `ShapeDecoration.lerp` (flutter/flutter#129298) 2023-06-21 [email protected] Gracefully handle negative position in getWordAtOffset (flutter/flutter#128464) 2023-06-21 [email protected] [flutter_tools] add a gradle error handler for could not open cache directory (flutter/flutter#129222) 2023-06-21 [email protected] Roll Flutter Engine from f973fb4636d3 to 090fae83548a (5 revisions) (flutter/flutter#129293) 2023-06-21 [email protected] Selection area right click behavior should match native (flutter/flutter#128224) 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],[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://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

Piinks · 2023-06-22T20:55:31Z

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

      labelPaddings: _labelPaddings,
+      dividerColor: theme.useMaterial3 ? widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor : null,
+      dividerHeight: theme.useMaterial3 ? widget.dividerHeight ?? tabBarTheme.dividerHeight ?? _defaults.dividerHeight : null,
+      width: MediaQuery.sizeOf(context).width,


@TahaTesser do you recall why this changed? I do not remember since this PR has had so much back and forth, I am looking though..

You mean the width? This what divider painters uses to draw the divider beyond the tabs without changing the layout.

Previously divider was only drawn with in the tabs, this caused this issue. #117722

Right right. Thank you for the reference! I could not recall. We're reviewing all of the screenshots one last time and there was a weird one where the customer mocked up a phone outline in the test and the divider extended out beyond it. I think it is an unintended issue of the test, not this change. No worries. :)

Ok so sad news, I am going to revert this. Unfortunately this is not uncommon when there are over a thousand screenshots. 😢

I misunderstood what an image was capturing. The width here actually causes an issue when the TabBar is contained within a ConstrainedBox, the divider extends beyond it.

The customer test was not showing a mocked up phone, but rather a floating box with the content it was floating over omitted from the test case.

I've put together a repro here:

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(useMaterial3: true), home: const MyHomePage(), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({ super.key }); @override Widget build(BuildContext context) { return Scaffold( body: DefaultTabController( length: 2, child: Center( child: ConstrainedBox( constraints: const BoxConstraints(maxWidth: 360), child: ColoredBox( color: Colors.grey[200]!, child: const TabBar.secondary( tabAlignment: TabAlignment.start, isScrollable: true, tabs: [ Tab(text: 'Test 1'), Tab(text: 'Test 2'), ], ), ) ), ), ), ); } }

This reverts commit 32fde13.

Reverts #125974

@OverRide

fixes [Material 3 `TabBar` does not take full width when `isScrollable: true`](#117722) ### Description 1. Fixed the divider doesn't stretch to take all the available width in the scrollable tab bar in M3 2. Added `dividerHeight` property. ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; /// Flutter code sample for [TabBar]. void main() => runApp(const TabBarApp()); class TabBarApp extends StatelessWidget { const TabBarApp({super.key}); @OverRide Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: TabBarExample(), ); } } class TabBarExample extends StatefulWidget { const TabBarExample({super.key}); @OverRide State<TabBarExample> createState() => _TabBarExampleState(); } class _TabBarExampleState extends State<TabBarExample> { bool rtl = false; bool customColors = false; bool removeDivider = false; Color dividerColor = Colors.amber; Color indicatorColor = Colors.red; @OverRide Widget build(BuildContext context) { return DefaultTabController( initialIndex: 1, length: 3, child: Directionality( textDirection: rtl ? TextDirection.rtl : TextDirection.ltr, child: Scaffold( appBar: AppBar( title: const Text('TabBar Sample'), actions: <Widget>[ IconButton.filledTonal( tooltip: 'Switch direction', icon: const Icon(Icons.swap_horiz), onPressed: () { setState(() { rtl = !rtl; }); }, ), IconButton.filledTonal( tooltip: 'Use custom colors', icon: const Icon(Icons.color_lens), onPressed: () { setState(() { customColors = !customColors; }); }, ), IconButton.filledTonal( tooltip: 'Show/hide divider', icon: const Icon(Icons.remove_rounded), onPressed: () { setState(() { removeDivider = !removeDivider; }); }, ), ], ), body: Column( children: <Widget>[ const Spacer(), const Text('Scrollable - TabAlignment.start'), TabBar( isScrollable: true, tabAlignment: TabAlignment.start, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Text('Scrollable - TabAlignment.startOffset'), TabBar( isScrollable: true, tabAlignment: TabAlignment.startOffset, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Text('Scrollable - TabAlignment.center'), TabBar( isScrollable: true, tabAlignment: TabAlignment.center, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Spacer(), const Text('Non-scrollable - TabAlignment.fill'), TabBar( tabAlignment: TabAlignment.fill, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Text('Non-scrollable - TabAlignment.center'), TabBar( tabAlignment: TabAlignment.center, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Spacer(), const Text('Secondary - TabAlignment.fill'), TabBar.secondary( tabAlignment: TabAlignment.fill, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Text('Secondary - TabAlignment.center'), TabBar.secondary( tabAlignment: TabAlignment.center, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Spacer(), ], ), ), ), ); } } ``` </details> ### Before ![Screenshot 2023-07-27 at 14 12 36](https://github.com/flutter/flutter/assets/48603081/1c08a9d2-ac15-4d33-8fa1-c765b4b10f92) ### After ![Screenshot 2023-07-27 at 14 13 12](https://github.com/flutter/flutter/assets/48603081/7e662dfe-9f32-46c9-a128-3024a4782882) This also contains regression test for #125974 (comment) ```dart // This is a regression test for #125974 (comment). testWidgets('Divider can be constrained', (WidgetTester tester) async { ``` ![Screenshot 2023-07-27 at 14 16 37](https://github.com/flutter/flutter/assets/48603081/ac2ef49b-2410-46d0-8ae2-d9b77236abba)

@OverRide

fixes [Material 3 `TabBar` does not take full width when `isScrollable: true`](flutter#117722) ### Description 1. Fixed the divider doesn't stretch to take all the available width in the scrollable tab bar in M3 2. Added `dividerHeight` property. ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; /// Flutter code sample for [TabBar]. void main() => runApp(const TabBarApp()); class TabBarApp extends StatelessWidget { const TabBarApp({super.key}); @OverRide Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: TabBarExample(), ); } } class TabBarExample extends StatefulWidget { const TabBarExample({super.key}); @OverRide State<TabBarExample> createState() => _TabBarExampleState(); } class _TabBarExampleState extends State<TabBarExample> { bool rtl = false; bool customColors = false; bool removeDivider = false; Color dividerColor = Colors.amber; Color indicatorColor = Colors.red; @OverRide Widget build(BuildContext context) { return DefaultTabController( initialIndex: 1, length: 3, child: Directionality( textDirection: rtl ? TextDirection.rtl : TextDirection.ltr, child: Scaffold( appBar: AppBar( title: const Text('TabBar Sample'), actions: <Widget>[ IconButton.filledTonal( tooltip: 'Switch direction', icon: const Icon(Icons.swap_horiz), onPressed: () { setState(() { rtl = !rtl; }); }, ), IconButton.filledTonal( tooltip: 'Use custom colors', icon: const Icon(Icons.color_lens), onPressed: () { setState(() { customColors = !customColors; }); }, ), IconButton.filledTonal( tooltip: 'Show/hide divider', icon: const Icon(Icons.remove_rounded), onPressed: () { setState(() { removeDivider = !removeDivider; }); }, ), ], ), body: Column( children: <Widget>[ const Spacer(), const Text('Scrollable - TabAlignment.start'), TabBar( isScrollable: true, tabAlignment: TabAlignment.start, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Text('Scrollable - TabAlignment.startOffset'), TabBar( isScrollable: true, tabAlignment: TabAlignment.startOffset, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Text('Scrollable - TabAlignment.center'), TabBar( isScrollable: true, tabAlignment: TabAlignment.center, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Spacer(), const Text('Non-scrollable - TabAlignment.fill'), TabBar( tabAlignment: TabAlignment.fill, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Text('Non-scrollable - TabAlignment.center'), TabBar( tabAlignment: TabAlignment.center, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Spacer(), const Text('Secondary - TabAlignment.fill'), TabBar.secondary( tabAlignment: TabAlignment.fill, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Text('Secondary - TabAlignment.center'), TabBar.secondary( tabAlignment: TabAlignment.center, dividerColor: customColors ? dividerColor : null, indicatorColor: customColors ? indicatorColor : null, dividerHeight: removeDivider ? 0 : null, tabs: const <Widget>[ Tab( icon: Icon(Icons.cloud_outlined), ), Tab( icon: Icon(Icons.beach_access_sharp), ), Tab( icon: Icon(Icons.brightness_5_sharp), ), ], ), const Spacer(), ], ), ), ), ); } } ``` </details> ### Before ![Screenshot 2023-07-27 at 14 12 36](https://github.com/flutter/flutter/assets/48603081/1c08a9d2-ac15-4d33-8fa1-c765b4b10f92) ### After ![Screenshot 2023-07-27 at 14 13 12](https://github.com/flutter/flutter/assets/48603081/7e662dfe-9f32-46c9-a128-3024a4782882) This also contains regression test for flutter#125974 (comment) ```dart // This is a regression test for flutter#125974 (comment). testWidgets('Divider can be constrained', (WidgetTester tester) async { ``` ![Screenshot 2023-07-27 at 14 16 37](https://github.com/flutter/flutter/assets/48603081/ac2ef49b-2410-46d0-8ae2-d9b77236abba)

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 May 3, 2023

Piinks reviewed May 4, 2023

View reviewed changes

TahaTesser force-pushed the fix_scrollable_tab_bar branch from 4e4e924 to ecd52c8 Compare May 5, 2023 15:45

TahaTesser commented May 5, 2023

View reviewed changes

packages/flutter/test/material/tabs_test.dart Outdated Show resolved Hide resolved

TahaTesser commented May 5, 2023

View reviewed changes

dev/tools/gen_defaults/lib/tabs_template.dart Outdated Show resolved Hide resolved

TahaTesser marked this pull request as ready for review May 5, 2023 15:54

TahaTesser requested a review from Piinks May 5, 2023 16:07

flutter-dashboard bot added the will affect goldens Changes to golden files label May 5, 2023

TahaTesser force-pushed the fix_scrollable_tab_bar branch from ecd52c8 to e1cfe2c Compare May 9, 2023 20:46

Piinks reviewed May 9, 2023

View reviewed changes

packages/flutter/lib/src/material/tabs.dart Outdated Show resolved Hide resolved

Piinks approved these changes May 9, 2023

View reviewed changes

Piinks force-pushed the fix_scrollable_tab_bar branch from e1cfe2c to b99eb8a Compare May 9, 2023 22:26

TahaTesser force-pushed the fix_scrollable_tab_bar branch from b99eb8a to 8fa6c91 Compare May 10, 2023 14:38

Piinks force-pushed the fix_scrollable_tab_bar branch from 8fa6c91 to 58eea4e Compare May 10, 2023 19:46

TahaTesser force-pushed the fix_scrollable_tab_bar branch from 58eea4e to b159baf Compare May 10, 2023 22:08

TahaTesser force-pushed the fix_scrollable_tab_bar branch from b159baf to dd12712 Compare May 15, 2023 15:15

This was referenced May 16, 2023

Create a migration guide for TabBar.TabAlignment #126920

Closed

Add TabBar.tabAlignment migration guide flutter/website#8700

Merged

HansMuller approved these changes Jun 22, 2023

View reviewed changes

TahaTesser added 5 commits June 22, 2023 19:01

Fix Material 3 Scrollable TabBar and dividerHeight

e55cfb8

Update template to use the new getToken method

28215b0

Fix secondary divider height token un-used

adceef0

Explicitly enable useMaterial3 flag in the M3 tests

277caf7

Use theme.useMaterial3 instead of hard-coded value

c91ef14

TahaTesser force-pushed the fix_scrollable_tab_bar branch from 0b1ab4d to c91ef14 Compare June 22, 2023 16:01

Piinks added the autosubmit Merge PR when tree becomes green via auto submit App label Jun 22, 2023

auto-submit bot merged commit 32fde13 into flutter:master Jun 22, 2023

engine-flutter-autoroll mentioned this pull request Jun 22, 2023

Roll Flutter from c40baf47c5c8 to 042c0366c9a9 (20 revisions) flutter/packages#4278

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 22, 2023

32fde13 Fix Material 3 Scrollable TabBar (flutter/flutter#125974)

b132ef7

Piinks reviewed Jun 22, 2023

View reviewed changes

TahaTesser deleted the fix_scrollable_tab_bar branch June 22, 2023 21:20

Piinks mentioned this pull request Jun 22, 2023

Revert "Fix Material 3 Scrollable TabBar" #129383

Merged

Piinks added a commit that referenced this pull request Jun 22, 2023

Revert "Fix Material 3 Scrollable TabBar (#125974)"

d43d5ef

This reverts commit 32fde13.

auto-submit bot pushed a commit that referenced this pull request Jun 22, 2023

Revert "Fix Material 3 Scrollable TabBar" (#129383)

087377e

Reverts #125974

HansMuller mentioned this pull request Jun 30, 2023

Flutter Framework Team: Notable Commits #121415

Closed

TahaTesser mentioned this pull request Jul 27, 2023

Fix Scrollable TabBar for Material 3 #131409

Merged

8 tasks

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2023

32fde13 Fix Material 3 Scrollable TabBar (flutter/flutter#125974)

55022e9

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 17, 2023

32fde13 Fix Material 3 Scrollable TabBar (flutter/flutter#125974)

466ab0b

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 17, 2023

32fde13 Fix Material 3 Scrollable TabBar (flutter/flutter#125974)

430b850

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 17, 2023

32fde13 Fix Material 3 Scrollable TabBar (flutter/flutter#125974)

d6c5600

Fix Material 3 Scrollable TabBar #125974

Fix Material 3 Scrollable TabBar #125974

Uh oh!

Conversation

TahaTesser commented May 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Bug (default tab alignment)

Fix (default tab alignment)

Code sample

Pre-launch Checklist

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

TahaTesser commented May 5, 2023

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented May 5, 2023

Uh oh!

flutter-dashboard bot commented May 9, 2023

Uh oh!

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented May 9, 2023

Uh oh!

Piinks commented May 11, 2023

Uh oh!

flutter-dashboard bot commented May 15, 2023

Uh oh!

Piinks commented May 15, 2023

Uh oh!

Piinks commented May 15, 2023

Uh oh!

TahaTesser commented May 16, 2023

Uh oh!

TahaTesser commented May 17, 2023

Uh oh!

TahaTesser commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TahaTesser commented Jun 22, 2023

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented Jun 22, 2023

Uh oh!

Piinks Jun 22, 2023

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jun 22, 2023

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jun 22, 2023

Choose a reason for hiding this comment

Uh oh!

Piinks Jun 22, 2023

Choose a reason for hiding this comment

Uh oh!

Piinks Jun 22, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix Material 3 Scrollable `TabBar` #125974

Fix Material 3 Scrollable `TabBar` #125974

TahaTesser commented May 3, 2023 •

edited

Loading

TahaTesser commented Jun 22, 2023 •

edited

Loading