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

        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

…lutter/flutter#150350)

Manual roll requested by [email protected] flutter/flutter@ccf3abe...6c06abb 2024-06-18 [email protected] Add test for engine artifact framework permissions (flutter/flutter#148786) 2024-06-18 [email protected] Add test for icon_button.3.dart (flutter/flutter#149988) 2024-06-18 [email protected] Roll Flutter Engine from 78fdd06af541 to 74f42ca3544c (6 revisions) (flutter/flutter#150421) 2024-06-18 [email protected] Fix transparent `dividerColor` breaks `TabBar.tabAlignment` (flutter/flutter#150350) 2024-06-18 [email protected] 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 [email protected] Extend the Windows web_tool_tests_1_2 shard timeout to 45 minutes (flutter/flutter#150393) 2024-06-18 [email protected] Roll Flutter Engine from 1c4e5e230ecb to 78fdd06af541 (3 revisions) (flutter/flutter#150403) 2024-06-18 [email protected] Roll Flutter Engine from a4f266f7eb1a to 1c4e5e230ecb (8 revisions) (flutter/flutter#150399) 2024-06-18 [email protected] Rename doc file to use standard hyphens (flutter/flutter#150314) 2024-06-17 [email protected] Fix typo in `SliverLayoutDimensions.hashCode` where not all properties are used in the hash code. (flutter/flutter#150306) 2024-06-17 [email protected] Fix doc comment references to 'this' (flutter/flutter#150379) 2024-06-17 [email protected] Add 'fail-fast' argument to flutter test (flutter/flutter#149587) 2024-06-17 [email protected] Update matchesGoldenFile documentation reference to goldenFileComparator (flutter/flutter#150343) 2024-06-17 [email protected] Reland 3: [CupertinoActionSheet] Match colors to native (flutter/flutter#150386) 2024-06-17 [email protected] [a11y] Add semantics: button to bottom navigation bar items and dropdown menu items (flutter/flutter#149375) 2024-06-17 [email protected] Reland "sliverGridDelegate mainAxisExtent add assert (#148470)" (flutter/flutter#149720) 2024-06-17 [email protected] `ScaffoldBackgroundColor` should default to `ColorScheme.surface` (flutter/flutter#149772) 2024-06-17 [email protected] Reland TreeSliver (flutter/flutter#149839) 2024-06-17 [email protected] Reland: [CupertinoActionSheet] Add sliding tap gesture (flutter/flutter#150219) 2024-06-17 [email protected] 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 [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://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

…lutter/flutter#150350)

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

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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

de5d529

…lutter/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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

f9f430b

…lutter/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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

21521c5

…lutter/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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

ad7a7a6

…lutter/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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

3be202a

…lutter/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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

1c3f444

…lutter/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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

0bf443c

…lutter/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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

61db457

…lutter/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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

11c8ae5

…lutter/flutter#150350)

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

3359900 Fix transparent dividerColor breaks TabBar.tabAlignment (f…

9b82d95

…lutter/flutter#150350)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

TahaTesser commented Jun 17, 2024 •

edited

Loading

Uh oh!

justinmc left a comment

Uh oh!

justinmc Jun 17, 2024

Uh oh!

TahaTesser Jun 18, 2024

Uh oh!

TahaTesser commented Jun 18, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix transparent dividerColor breaks TabBar.tabAlignment #150350

Fix transparent dividerColor breaks TabBar.tabAlignment #150350

Uh oh!

Conversation

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

Uh oh!

Code sample

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

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

Pre-launch Checklist

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

justinmc Jun 17, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jun 18, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser commented Jun 18, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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

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

TahaTesser commented Jun 17, 2024 •

edited

Loading

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

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