Fix transparent `dividerColor` breaks `TabBar.tabAlignment` #150350

TahaTesser · 2024-06-17T12:37:51Z

fixes TabBar.tabAlignment property does't work when dividerColor is transparent

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(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('TabBar'),
            bottom: const TabBar(
              dividerColor: Colors.transparent,
              tabAlignment: TabAlignment.start,
              isScrollable: true,
              tabs: <Widget>[
                Tab(text: 'TAB 1'),
                Tab(text: 'TAB 2'),
              ],
            ),
          ),
          body: const TabBarView(
            children: <Widget>[
              SizedBox.expand(),
              SizedBox.expand(),
            ],
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {},
            child: const Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

Before (`dividerColor: Colors.transparent`, `tabAlignment: TabAlignment.start`)

After (`dividerColor: Colors.transparent`, `tabAlignment: TabAlignment.start`)

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.

justinmc

LGTM with a question about a comment you added.

justinmc · 2024-06-17T17:50:03Z

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

@@ -1814,7 +1818,7 @@ class _TabBarState extends State<TabBar> {

        final Color dividerColor = widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor!;
        final double dividerHeight = widget.dividerHeight ?? tabBarTheme.dividerHeight ?? _defaults.dividerHeight!;
-        final bool showDivider = dividerColor != Colors.transparent && dividerHeight > 0;
+        final bool showDivider = dividerHeight > 0;


Then the first comment you added above is not true, right? The divider will still be drawn even when it is transparent.

Excellent catch! You're right, this needs to be separate conditions. I just updated, the divider isn't drawn now when divider color is transparent.

TahaTesser · 2024-06-18T10:55:53Z

Resolved test class conflict from another of my TabBar PR #150041

…flutter/flutter#150350)

…6954) Manual roll requested by stuartmorgan@google.com flutter/flutter@ccf3abe...6c06abb 2024-06-18 magder@google.com Add test for engine artifact framework permissions (flutter/flutter#148786) 2024-06-18 32538273+ValentinVignal@users.noreply.github.com Add test for icon_button.3.dart (flutter/flutter#149988) 2024-06-18 engine-flutter-autoroll@skia.org Roll Flutter Engine from 78fdd06af541 to 74f42ca3544c (6 revisions) (flutter/flutter#150421) 2024-06-18 tessertaha@gmail.com Fix transparent `dividerColor` breaks `TabBar.tabAlignment` (flutter/flutter#150350) 2024-06-18 tessertaha@gmail.com Fix scrollable `TabBar` jittering (flutter/flutter#150041) 2024-06-18 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Reland 3: [CupertinoActionSheet] Match colors to native (#150386)" (flutter/flutter#150413) 2024-06-18 jason-simmons@users.noreply.github.com Extend the Windows web_tool_tests_1_2 shard timeout to 45 minutes (flutter/flutter#150393) 2024-06-18 engine-flutter-autoroll@skia.org Roll Flutter Engine from 1c4e5e230ecb to 78fdd06af541 (3 revisions) (flutter/flutter#150403) 2024-06-18 engine-flutter-autoroll@skia.org Roll Flutter Engine from a4f266f7eb1a to 1c4e5e230ecb (8 revisions) (flutter/flutter#150399) 2024-06-18 parlough@gmail.com Rename doc file to use standard hyphens (flutter/flutter#150314) 2024-06-17 120297255+PurplePolyhedron@users.noreply.github.com Fix typo in `SliverLayoutDimensions.hashCode` where not all properties are used in the hash code. (flutter/flutter#150306) 2024-06-17 srawlins@google.com Fix doc comment references to 'this' (flutter/flutter#150379) 2024-06-17 Lexycon@users.noreply.github.com Add 'fail-fast' argument to flutter test (flutter/flutter#149587) 2024-06-17 dev@alestiago.com Update matchesGoldenFile documentation reference to goldenFileComparator (flutter/flutter#150343) 2024-06-17 dkwingsmt@users.noreply.github.com Reland 3: [CupertinoActionSheet] Match colors to native (flutter/flutter#150386) 2024-06-17 jhy03261997@gmail.com [a11y] Add semantics: button to bottom navigation bar items and dropdown menu items (flutter/flutter#149375) 2024-06-17 yinxulolol@gmail.com Reland "sliverGridDelegate mainAxisExtent add assert (#148470)" (flutter/flutter#149720) 2024-06-17 36861262+QuncCccccc@users.noreply.github.com `ScaffoldBackgroundColor` should default to `ColorScheme.surface` (flutter/flutter#149772) 2024-06-17 katelovett@google.com Reland TreeSliver (flutter/flutter#149839) 2024-06-17 dkwingsmt@users.noreply.github.com Reland: [CupertinoActionSheet] Add sliding tap gesture (flutter/flutter#150219) 2024-06-17 engine-flutter-autoroll@skia.org Roll Flutter Engine from 5989f0215fed to a4f266f7eb1a (1 revision) (flutter/flutter#150377) 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 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://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

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

TahaTesser changed the title ~~Fix transparent dividerColor breaks TabBar. tabAlignment~~ Fix transparent dividerColor breaks TabBar.tabAlignment Jun 17, 2024

TahaTesser force-pushed the scrollabe_tab_bar_transparent_divider branch from b06afd9 to 66b7844 Compare June 17, 2024 12:41

TahaTesser marked this pull request as ready for review June 17, 2024 13:09

TahaTesser requested a review from Piinks June 17, 2024 13:09

justinmc approved these changes Jun 17, 2024

View reviewed changes

TahaTesser force-pushed the scrollabe_tab_bar_transparent_divider branch from 4cf32ce to 793e438 Compare June 18, 2024 10:00

Fix transparent dividerColor breaks TabBar.tabAlignment

13c1dc1

TahaTesser force-pushed the scrollabe_tab_bar_transparent_divider branch from 793e438 to 13c1dc1 Compare June 18, 2024 10:35

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

auto-submit bot merged commit 3359900 into flutter:master Jun 18, 2024
72 checks passed

TahaTesser deleted the scrollabe_tab_bar_transparent_divider branch June 18, 2024 12:09

engine-flutter-autoroll mentioned this pull request Jun 18, 2024

Roll Flutter from ccf3abe94047 to b44c67e2e893 (19 revisions) flutter/packages#6944

Closed

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

33599006e Fix transparent dividerColor breaks TabBar.tabAlignment (…

de5d529

…flutter/flutter#150350)

engine-flutter-autoroll mentioned this pull request Jun 18, 2024

Roll Flutter from ccf3abe94047 to f2c48afbb1cf (20 revisions) flutter/packages#6945

Closed

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

33599006e Fix transparent dividerColor breaks TabBar.tabAlignment (…

f9f430b

…flutter/flutter#150350)

engine-flutter-autoroll mentioned this pull request Jun 18, 2024

Roll Flutter from ccf3abe94047 to 6c06abbb5576 (21 revisions) flutter/packages#6947

Closed

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

33599006e Fix transparent dividerColor breaks TabBar.tabAlignment (…

21521c5

…flutter/flutter#150350)

engine-flutter-autoroll mentioned this pull request Jun 18, 2024

Roll Flutter from ccf3abe94047 to f54dfcd27db8 (22 revisions) flutter/packages#6948

Closed

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

33599006e Fix transparent dividerColor breaks TabBar.tabAlignment (…

ad7a7a6

…flutter/flutter#150350)

engine-flutter-autoroll mentioned this pull request Jun 19, 2024

Roll Flutter from ccf3abe94047 to 71ac7f55b3dd (29 revisions) flutter/packages#6950

Closed

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

33599006e Fix transparent dividerColor breaks TabBar.tabAlignment (…

3be202a

…flutter/flutter#150350)

engine-flutter-autoroll mentioned this pull request Jun 19, 2024

Roll Flutter from ccf3abe94047 to 71ac7f55b3dd (29 revisions) flutter/packages#6951

Closed

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

33599006e Fix transparent dividerColor breaks TabBar.tabAlignment (…

1c3f444

…flutter/flutter#150350)

engine-flutter-autoroll mentioned this pull request Jun 20, 2024

Manual roll Flutter from ccf3abe94047 to 6c06abbb5576 (21 revisions) flutter/packages#6954

Merged

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

33599006e Fix transparent dividerColor breaks TabBar.tabAlignment (…

0bf443c

…flutter/flutter#150350)

engine-flutter-autoroll mentioned this pull request Jun 20, 2024

Roll Flutter from ccf3abe94047 to bfdcb51643b3 (32 revisions) flutter/packages#6955

Closed

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

33599006e Fix transparent dividerColor breaks TabBar.tabAlignment (…

61db457

…flutter/flutter#150350)

engine-flutter-autoroll mentioned this pull request Jun 20, 2024

Roll Flutter from ccf3abe94047 to 0674f46e9fde (33 revisions) flutter/packages#6956

Closed

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

33599006e Fix transparent dividerColor breaks TabBar.tabAlignment (…

11c8ae5

…flutter/flutter#150350)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix transparent `dividerColor` breaks `TabBar.tabAlignment` #150350

Fix transparent `dividerColor` breaks `TabBar.tabAlignment` #150350

Fix transparent dividerColor breaks TabBar.tabAlignment #150350

Fix transparent dividerColor breaks TabBar.tabAlignment #150350

Conversation

Code sample

Before (dividerColor: Colors.transparent, tabAlignment: TabAlignment.start)

After (dividerColor: Colors.transparent, tabAlignment: TabAlignment.start)

Pre-launch Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Fix transparent `dividerColor` breaks `TabBar.tabAlignment` #150350

Fix transparent `dividerColor` breaks `TabBar.tabAlignment` #150350

Before (`dividerColor: Colors.transparent`, `tabAlignment: TabAlignment.start`)

After (`dividerColor: Colors.transparent`, `tabAlignment: TabAlignment.start`)