Skip to content

TabBar labelStyle.color and unselectedLabelStyle.color does not take effect #109484

Closed
#133989
Closed
TabBar labelStyle.color and unselectedLabelStyle.color does not take effect#109484
#133989
Assignees
TahaTesser
Labels
P2Important issues not at the top of the work listfound in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@dayveedaniel
dayveedaniel
opened on Aug 13, 2022

Steps to Reproduce

1.(similar issue #67342 but on tab bar) Execute flutter run on the code sample

void main() => runApp(MyApp());


class MyApp extends StatelessWidget{

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin {

  late final TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(
              color: AppColors.background,
              borderRadius: BorderRadius.circular(12),
            ),
            child: TabBar(
              controller: _controller,
              labelStyle:TextStyle(
                fontWeight: FontWeight.w700,
                fontSize: 14,
                color:  Colors.white
              ),
              unselectedLabelStyle:
              TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 14,
                  color:  Colors.black
              ),
              indicator: BoxDecoration(
                  color: Colors.teal,
                  borderRadius: BorderRadius.circular(8)),
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
              ],
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _controller,
                children: [
              Text('tab 1'),
              Text('tab 2'),
            ]),
          )
        ],
      )

    );
  }
}

Expected results: unselected tab text color should be black

Actual results: unselected tab text color is same as selected tab

Logs 
[√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.19043.1889],)
    • Flutter version 3.0.5 at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (4 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Users\asus\AppData\Local\Android\sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.
tab 1 tab 2
image image

Activity

  1. maheshj01
    added
    in triagePresently being triaged by the triage team
    on Aug 15, 2022

  2. maheshj01 commented on Aug 15, 2022

    @maheshj01
    maheshj01
    on Aug 15, 2022
    Member

    Hi @dayveedaniel, Thanks for filing the issue. I am able to reproduce the issue on the latest stable and the master channel. Looks like labelStyle.color and unselectedLabelStyle.color are not taking effect while other properties seem to work.

    Screen.Recording.2022-08-15.at.1.55.24.PM.mov
    code sample 
    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late final TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Column(
          children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.cyan,
                borderRadius: BorderRadius.circular(12),
              ),
              child: TabBar(
                controller: _controller,
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 14,
                    color: Colors.red),
                unselectedLabelStyle: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                    color: Colors.red),
                indicator: BoxDecoration(
                    color: Colors.teal, borderRadius: BorderRadius.circular(8)),
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                ],
              ),
            ),
            Expanded(
              child: TabBarView(controller: _controller, children: [
                Text('tab 1'),
                Text('tab 2'),
              ]),
            )
          ],
        ));
  }
}
    flutter doctor -v (mac) 
    [✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.0.5 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (5 days ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (3 available)
    • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64  • Android 11 (API 30) (emulator)
    • macOS (desktop)           • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)              • chrome        • web-javascript • Google Chrome 103.0.5060.114

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

    [✓] Flutter (Channel master, 3.1.0-0.0.pre.2009, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.1.0-0.0.pre.2009 on channel master at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9d96c7b8be (3 days ago), 2022-08-01 00:39:06 -0400
    • Engine revision cf0db3e546
    • Dart version 2.19.0 (build 2.19.0-49.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.69.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64  • Android 11 (API 30) (emulator)
    • macOS (desktop)           • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)              • chrome        • web-javascript • Google Chrome 104.0.5112.79

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
  3. maheshj01
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.0Found to occur in 3.0
    found in release: 3.1Found to occur in 3.1
    and removed
    in triagePresently being triaged by the triage team
    on Aug 15, 2022
  4. maheshj01
    changed the title [-]unselectedLabelStyle of TabBar is not applied [/-] [+]TabBar labelStyle.color and unselectedLabelStyle.color does not take effect[/+] on Aug 15, 2022
  5. werainkhatri
    self-assigned this
    on Aug 15, 2022

  6. werainkhatri commented on Feb 11, 2023

    @werainkhatri
    werainkhatri
    on Feb 11, 2023
    Member

    looks like this is a breaking change (ref: #109541 (comment)). we'd want to wait until there was strong demand for the feature before we can make the change.

  7. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    and removed
    triaged-designTriaged by Design Languages team
    on Jul 8, 2023

  8. 8 remaining items

  9. TahaTesser commented on Aug 9, 2023

    @TahaTesser
    TahaTesser
    on Aug 9, 2023
    Contributor

    @TahaTesser - is this issue still unresolved?

    Yes. this seems to be a breaking change. When @werainkhatri tried to fix this it broke the internal tests per your comment .

    I can work on a fix with a breaking change migration guide to fix this issue if you want.

  10. HansMuller commented on Aug 9, 2023

    @HansMuller
    HansMuller
    on Aug 9, 2023
    Contributor

    A fix would be good thing to work on, yes.

  11. TahaTesser
    self-assigned this
    on Aug 9, 2023
  12. TahaTesser
    added this to Nevercodeon Aug 9, 2023
  13. github-project-automation
    moved this to To do in Nevercodeon Aug 9, 2023
  14. TahaTesser
    moved this from To do to In progress in Nevercodeon Aug 29, 2023
  15. auto-submit
    added a commit that references this issue on Aug 30, 2023

    Update & improve `TabBar.labelColor` tests (#133668)

    994aab4
  16. auto-submit
    closed this as completedin #133989on Sep 7, 2023
  17. github-project-automation
    moved this from In progress to Done (PR merged) in Nevercodeon Sep 7, 2023
  18. auto-submit
    added a commit that references this issue on Sep 7, 2023

    Fix `TabBar` doesn't use `labelStyle` & `unselectedLabelStyle` color (#…

    f5355af
  19. TahaTesser
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Sep 7, 2023

  20. github-actions commented on Sep 21, 2023

    @github-actions
    github-actionsbot
    on Sep 21, 2023

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  21. github-actions
    locked as resolved and limited conversation to collaborators on Sep 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listfound in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

  • Nevercode
    Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions