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

Piinks · 2023-05-23T17:28:58Z

Thanks again for your patience here! I am still working through the customer tests. I found one case where it looks like the indicator and divider are not properly aligned when updated with this PR. I am still looking into why, but wanted to chare in case anything jumped out at you. I'll continue investigating.

I have omitted the labels since it is an internal customer. Ignore the horizontal alignment, the images here are cropped. It is the little bit of vertical spacing that is the issue:

This is the expected behavior:

This PR causes this:

Piinks · 2023-05-23T17:34:24Z

If you are up for it, splitting this up further may help. There are hundreds of image tests and some of them are affected by the divider height change, some by the tab alignment, it makes it more challenging to sort through them all. Just came across another odd case:

Expected:

With this PR:

TahaTesser · 2023-05-25T12:53:00Z

@Piinks
Thank you for the details, I really appreciate it. The change is small but tricky to verify if it is fixing the problems that you shared.

Is it possible for you to share the tab bar layout code from this test above so I can test my fix in the same conditions?
It will be tremendously helpful for me rather than guessing what might be going wrong there. I can add a similar regression test in the framework while updating this PR.

Piinks · 2023-05-25T20:24:35Z

Ok, so for that specific test, it looks like the customer has a custom AppBar and a custom TabBar inside of that.
But, it looks like this might be what you are looking for, the custom TabBar is this:

Stack(
    alignment: Alignment.bottomCenter,
    children: [
      Divider(height: 0),
      TabBar(
        controller: tabController,
        labelPadding: EdgeInsets.zero,
        tabs: tabs,
        onTap: (tappedTabIndex) {
          //...
        },
      ),
    ],
  );

Does this help? If not I can dig further, just let me know! :)

TahaTesser · 2023-05-25T20:45:58Z

Does this help? If not I can dig further, just let me know! :)

I just tried with PreferredSize widget in AppBar.Bottom and in Scaffold.Body simulate both preferred size and non-preferred use cases of TabBar. Nothing unusual when testing this.

fixes flutter/flutter#126920 [TabBar.tabAlignment](https://master-api.flutter.dev/flutter/material/TabBar/tabAlignment.html) was introduced in flutter/flutter#125036 This PR adds a migration guide for `TabBar.tabAlignment`. Related flutter/flutter#125974 ## Presubmit checklist - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer. --------- Co-authored-by: Anthony Sansone <atsansone@users.noreply.github.com>

Piinks · 2023-05-30T16:54:44Z

Hmm, still trying to get a reproduction here. The fact that the customer is using a custom app bar and a custom tab bar is making it a bit difficult. Just wanted to let you know I was still looking into this.

TahaTesser · 2023-06-21T22:18:51Z

Hmm looks like we have some new test failures here

That's weird. I can reproduce this locally too. Pretty sure we had most of it green before, didn't we?
I'll take a closer look in the morning.

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 ahmedelsaayid@gmail.com Remove unnecessary variable `_hasPrimaryFocus` (flutter/flutter#129066) 2023-06-22 tessertaha@gmail.com Fix Material 3 Scrollable `TabBar` (flutter/flutter#125974) 2023-06-22 utisam@gmail.com Fix: Closing bottom sheet and removing FAB cause assertion failure (flutter/flutter#128566) 2023-06-22 tessertaha@gmail.com Add `InputDecorationTheme.merge` (flutter/flutter#129011) 2023-06-22 engine-flutter-autoroll@skia.org Roll Packages from 9af50d4 to 95bc1c6 (6 revisions) (flutter/flutter#129351) 2023-06-22 42216813+eliasyishak@users.noreply.github.com Prevent crashes on range errors when selecting device (flutter/flutter#129290) 2023-06-22 zanderso@users.noreply.github.com Revert "Roll Flutter Engine from 703c9a14ac7f to 8cc6d6d5efdb (1 revision)" (flutter/flutter#129353) 2023-06-22 engine-flutter-autoroll@skia.org Roll Flutter Engine from 703c9a14ac7f to 8cc6d6d5efdb (1 revision) (flutter/flutter#129339) 2023-06-22 engine-flutter-autoroll@skia.org Roll Flutter Engine from d9530e2b87de to 703c9a14ac7f (1 revision) (flutter/flutter#129337) 2023-06-22 engine-flutter-autoroll@skia.org Roll Flutter Engine from c6251a69a09a to d9530e2b87de (1 revision) (flutter/flutter#129334) 2023-06-22 engine-flutter-autoroll@skia.org Roll Flutter Engine from 08aaa88bf67f to c6251a69a09a (10 revisions) (flutter/flutter#129331) 2023-06-22 jason-simmons@users.noreply.github.com Manual roll of packages to 9af50d4 (flutter/flutter#129328) 2023-06-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 090fae83548a to 08aaa88bf67f (3 revisions) (flutter/flutter#129306) 2023-06-21 yjbanov@google.com [framework,web] add FlutterTimeline and semantics benchmarks that use it (flutter/flutter#128366) 2023-06-21 fluttergithubbot@gmail.com Roll pub packages (flutter/flutter#128966) 2023-06-21 6655696+guidezpl@users.noreply.github.com Remove incorrect non-nullable assumption from `ShapeDecoration.lerp` (flutter/flutter#129298) 2023-06-21 jmccandless@google.com Gracefully handle negative position in getWordAtOffset (flutter/flutter#128464) 2023-06-21 christopherfujino@gmail.com [flutter_tools] add a gradle error handler for could not open cache directory (flutter/flutter#129222) 2023-06-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from f973fb4636d3 to 090fae83548a (5 revisions) (flutter/flutter#129293) 2023-06-21 rmolivares@renzo-olivares.dev 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 dit@google.com,rmistry@google.com,stuartmorgan@google.com 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 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

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

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

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!

Piinks commented May 23, 2023

Uh oh!

Piinks commented May 23, 2023

Uh oh!

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

Uh oh!

Uh oh!

Piinks commented May 25, 2023

Uh oh!

TahaTesser commented May 25, 2023

Uh oh!

Piinks commented May 30, 2023

Uh oh!

TahaTesser commented Jun 21, 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

Fix Material 3 Scrollable `TabBar` #125974

Fix Material 3 Scrollable `TabBar` #125974

TahaTesser commented May 3, 2023 •

edited

Loading

TahaTesser commented May 25, 2023 •

edited

Loading

TahaTesser commented Jun 22, 2023 •

edited

Loading