Skip to content

Fix TabBar doesn't use labelStyle & unselectedLabelStyle color #133989

New issue

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

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

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 7, 2023

Conversation

TahaTesser
Copy link
Member

Fixes TabBar labelStyle.color and unselectedLabelStyle.color does not take effect

Code sample

expand to view the code sample
import 'package:flutter/material.dart';

/// Flutter code sample for [TabBar].

const Color labelColor = Color(0xFFFF0000);
const Color unselectedLabelColor = Color(0x95FF0000);
const TextStyle labelStyle = TextStyle(
  color: Color(0xff0000ff),
  fontWeight: FontWeight.bold,
);
const TextStyle unselectedLabelStyle = TextStyle(
  color: Color(0x950000ff),
  fontStyle: FontStyle.italic,
);

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const TabBarExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Sample'),
          bottom: const TabBar(
            // labelColor: labelColor,
            // unselectedLabelColor: unselectedLabelColor,
            labelStyle: labelStyle,
            unselectedLabelStyle: unselectedLabelStyle,
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.cloud_outlined),
                text: 'Cloudy',
              ),
              Tab(
                icon: Icon(Icons.beach_access_sharp),
                text: 'Sunny',
              ),
              Tab(
                icon: Icon(Icons.brightness_5_sharp),
                text: 'Rainy',
              ),
            ],
          ),
        ),
        body: const TabBarView(
          children: <Widget>[
            Center(
              child: Text("It's cloudy here"),
            ),
            Center(
              child: Text("It's rainy here"),
            ),
            Center(
              child: Text("It's sunny here"),
            ),
          ],
        ),
      ),
    );
  }
}

When labelStyle and unselectedLabelStyle are specified with a color.

Before

image

After

image

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.

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Sep 4, 2023
@TahaTesser TahaTesser force-pushed the fix_tab_bar_label_color branch from 2c1050c to 4a78e8d Compare September 5, 2023 19:58
@TahaTesser TahaTesser marked this pull request as ready for review September 5, 2023 19:58
@TahaTesser TahaTesser force-pushed the fix_tab_bar_label_color branch from 4a78e8d to c8d9f75 Compare September 6, 2023 09:48
Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

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

LGTM

/// precedence calculation.
/// When this color or the [TabBarTheme.unselectedLabelColor] is specified, it
/// overrides the [TextStyle.color] specified for the [unselectedLabelStyle]
/// or the [TabBarTheme.unselectedLabelStyle].
Copy link
Contributor

Choose a reason for hiding this comment

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

It's a shame that this is so complicated although it's likely that most developers will expect these sorts of overrides to work intuitively.

@TahaTesser TahaTesser force-pushed the fix_tab_bar_label_color branch from c8d9f75 to 39fa578 Compare September 7, 2023 07:07
@TahaTesser TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 7, 2023
@auto-submit auto-submit bot merged commit f5355af into flutter:master Sep 7, 2023
@TahaTesser TahaTesser deleted the fix_tab_bar_label_color branch September 7, 2023 09:20
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
auto-submit bot pushed a commit to flutter/packages that referenced this pull request Sep 7, 2023
Manual roll Flutter from 685ce14 to aea4552 (64 revisions)

Manual roll requested by [email protected]

flutter/flutter@685ce14...aea4552

2023-09-07 [email protected] add --exit flag to dev/devicelab/bin/test_runner.dart (flutter/flutter#134165)
2023-09-07 [email protected] fix `--exit` flag in dev/devicelab/bin/run.dart (flutter/flutter#134162)
2023-09-07 [email protected] Roll Packages from e7d812c to 22d4754 (9 revisions) (flutter/flutter#134232)
2023-09-07 [email protected] Roll Flutter Engine from 71bea01d3abe to f0b718e28779 (2 revisions) (flutter/flutter#134231)
2023-09-07 [email protected] DropdownRoutePage should dispose the created ScrollController. (flutter/flutter#133941)
2023-09-07 [email protected] Cover some test/widgets tests with leak tracking (flutter/flutter#133803)
2023-09-07 [email protected] SearchDelegate should dispose resources. (flutter/flutter#133948)
2023-09-07 [email protected] Fixed [NavigationRailDestination]'s label opacity while disabled not being coherent with the icon (flutter/flutter#132345)
2023-09-07 [email protected] Roll Flutter Engine from 558136a1ccbf to 71bea01d3abe (2 revisions) (flutter/flutter#134216)
2023-09-07 [email protected] Roll Flutter Engine from 5a45ecd24aa3 to 558136a1ccbf (1 revision) (flutter/flutter#134206)
2023-09-07 [email protected] Roll Flutter Engine from d864ae68db3c to 5a45ecd24aa3 (1 revision) (flutter/flutter#134201)
2023-09-07 [email protected] Fix `TabBar` doesn't use `labelStyle` & `unselectedLabelStyle` color (flutter/flutter#133989)
2023-09-07 [email protected] Fix `DataTable`'s `headingTextStyle` & `dataTextStyle` are not merged with default text style (flutter/flutter#134138)
2023-09-07 [email protected] Roll Flutter Engine from 187c5b3c5f71 to d864ae68db3c (2 revisions) (flutter/flutter#134199)
2023-09-07 [email protected] Reland "Fix `Chip.shape`'s side is not used when provided in Material 3" (flutter/flutter#133856)
2023-09-07 [email protected] Roll Flutter Engine from 75437a3bd002 to 187c5b3c5f71 (1 revision) (flutter/flutter#134193)
2023-09-07 [email protected] Manual roll Flutter Engine from 2c69d05dfafb to 75437a3bd002 (15 revisions) (flutter/flutter#134188)
2023-09-07 [email protected] Revert "Roll Flutter Engine from 2c69d05dfafb to fa14d337449b (6 revisions)" (flutter/flutter#134183)
2023-09-06 49699333+dependabot[bot]@users.noreply.github.com Bump actions/upload-artifact from 3.1.2 to 3.1.3 (flutter/flutter#134173)
2023-09-06 [email protected] Roll Flutter Engine from 2c69d05dfafb to fa14d337449b (6 revisions) (flutter/flutter#134169)
2023-09-06 [email protected] DraggableScrollableActuator should dispose notifier. (flutter/flutter#133917)
2023-09-06 [email protected] Roll Flutter Engine from b04c2a378302 to 2c69d05dfafb (3 revisions) (flutter/flutter#134164)
2023-09-06 [email protected] Clean the fixed TODOs. (flutter/flutter#133859)
2023-09-06 [email protected] Roll Flutter Engine from 839051596b1d to b04c2a378302 (7 revisions) (flutter/flutter#134158)
2023-09-06 [email protected] [Windows Arm64] Also use Windows 11 for Devicelab tests (flutter/flutter#134082)
2023-09-06 [email protected] Fix `subtitleTextStyle.color` isn't applied to the `ListTile.subtitle` in Material 2 (flutter/flutter#133422)
2023-09-06 [email protected] Add `CheckedPopupMenuItem.onTap` callback (flutter/flutter#134000)
2023-09-06 [email protected] MinimumTextContrastGuideline should dispose image. (flutter/flutter#133861)
2023-09-06 [email protected] [flutter_tools] Fix "FormatException: Invalid date format" during version freshness check (flutter/flutter#134088)
2023-09-06 [email protected] Fix not disposed items in Cupertino app and route. (flutter/flutter#134085)
2023-09-06 [email protected] Roll Flutter Engine from a5e7fa6bf81a to 839051596b1d (2 revisions) (flutter/flutter#134140)
2023-09-06 [email protected] _DropdownMenuState should dispose TextEditingController. (flutter/flutter#133914)
2023-09-06 [email protected] Roll Flutter Engine from 5253a33096d1 to a5e7fa6bf81a (1 revision) (flutter/flutter#134137)
2023-09-06 [email protected] Roll Flutter Engine from c7fd088291e2 to 5253a33096d1 (1 revision) (flutter/flutter#134135)
2023-09-06 [email protected] Roll Flutter Engine from 3d9989f1e155 to c7fd088291e2 (1 revision) (flutter/flutter#134132)
2023-09-06 [email protected] Roll Flutter Engine from bace539bb654 to 3d9989f1e155 (3 revisions) (flutter/flutter#134128)
2023-09-06 [email protected] Roll Flutter Engine from 9344685efbc3 to bace539bb654 (1 revision) (flutter/flutter#134104)
2023-09-06 [email protected] Roll Flutter Engine from 0c8c1647dcd0 to 9344685efbc3 (1 revision) (flutter/flutter#134103)
2023-09-06 [email protected] Roll Flutter Engine from 0c663258fd09 to 0c8c1647dcd0 (1 revision) (flutter/flutter#134100)
2023-09-06 [email protected] Roll Flutter Engine from 8bacc3b38707 to 0c663258fd09 (3 revisions) (flutter/flutter#134096)
2023-09-06 [email protected] Roll Flutter Engine from 590349006d23 to 8bacc3b38707 (5 revisions) (flutter/flutter#134089)
2023-09-06 [email protected] Roll Flutter Engine from 5b2cc9d9b8fe to 590349006d23 (2 revisions) (flutter/flutter#134081)
2023-09-05 [email protected] Roll Flutter Engine from 98b036ae708e to 5b2cc9d9b8fe (2 revisions) (flutter/flutter#134080)
2023-09-05 [email protected] Roll Flutter Engine from f4975e04f35e to 98b036ae708e (3 revisions) (flutter/flutter#134077)
...
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
autosubmit Merge PR when tree becomes green via auto submit App f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TabBar labelStyle.color and unselectedLabelStyle.color does not take effect
2 participants