Skip to content

AppBar with a TabBar doesn't use appropriate tab label color #103642

Closed
#116110
Closed
AppBar with a TabBar doesn't use appropriate tab label color#103642
#116110
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 version

Description

@parnic
parnic
opened on May 12, 2022

Steps to Reproduce

  1. Execute flutter run on the code sample
  2. View application in light theme

Expected results:

  1. TabBar icons should use a contrasting color with the appbar background so they are visible
  2. When a child TabBarView is scrolled under the AppBar, the AppBar should raise its elevation and use its tint color. This works when the child is not a TabBarView

Actual results:

With Material 3 enabled on a light theme, the AppBar:

  1. Defaults to a white icon on a white background
  2. Does not change its elevation or tint, so it's difficult to see that something has scrolled under it.

Code sample

DartPad example here: https://dartpad.dev/?id=ce15440e9376bd9944e6a53350ff4f70

This is a modification of one of the TabBar examples from the official docs. For some reason, DartPad seems to hang/crash when attempting to scroll the first tab, but it reproduces just fine on an Android emulator.

Light mode:
image

Things are pretty okay in dark mode:
image

Activity

  1. parnic
    changed the title [-]Material 3 AppBar with a TabBar body doesn't use appropriate tab icon colors and doesn't activate its scroll-under behavior[/-] [+]Material 3 AppBar with a TabBar body doesn't use appropriate tab icon colors and doesn't activate its scroll-under behavior in Flutter 3.0.0[/+] on May 12, 2022

  2. parnic commented on May 13, 2022

    @parnic
    parnic
    on May 13, 2022
    Author

    I'm now realizing that maybe Material 3 has moved away from tabs on top app bars. If that's the case, I will need to figure out what to do about my pages that currently have tabs where there's already a bottom nav bar.

  3. TahaTesser
    added
    in triagePresently being triaged by the triage team
    on May 13, 2022

  4. TahaTesser commented on May 13, 2022

    @TahaTesser
    TahaTesser
    on May 13, 2022
    Contributor

    Hi!
    Thanks for following the issue, I can reproduce it.

    minimal code sample 
    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key, this.dark = false, this.useMaterial3 = true});

  final bool dark;
  final bool useMaterial3;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      themeMode: dark ? ThemeMode.dark : ThemeMode.light,
      theme: ThemeData(
        useMaterial3: useMaterial3,
        brightness: Brightness.light,
        colorSchemeSeed: const Color(0xff6750a4),
      ),
      darkTheme: ThemeData(
        useMaterial3: useMaterial3,
        brightness: Brightness.dark,
        colorSchemeSeed: const Color(0xff6750a4),
      ),
      home: const MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.cloud_outlined),
                text: 'Cloud',
              ),
              Tab(
                icon: Icon(Icons.beach_access_sharp),
                text: 'Beach',
              ),
              Tab(
                icon: Icon(Icons.brightness_5_sharp),
                text: 'Beach',
              ),
            ],
          ),
        ),
        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"),
            ),
          ],
        ),
      ),
    );
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel master, 3.1.0-0.0.pre.684, on macOS 12.3.1 21E258 darwin-arm, locale
    en-GB)
    • Flutter version 3.1.0-0.0.pre.684 at /Users/tahatesser/Code/flutter_nevercode
    • Upstream repository [email protected]:NevercodeHQ/flutter.git
    • Framework revision 2ee3a6f92a (53 minutes ago), 2022-05-13 04:19:07 -0400
    • Engine revision fb30b43b16
    • Dart version 2.18.0 (build 2.18.0-109.0.dev)
    • DevTools version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/tahatesser/Code/android-sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • ANDROID_SDK_ROOT = /Users/tahatesser/Code/android-sdk
    • Java binary at: /Applications/Android Studio
      Preview.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

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

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

[✓] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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.13+0-b1751.21-8125866)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.3.1 21E258 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 101.0.4951.64

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

• No issues found!
  5. TahaTesser
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    and removed
    in triagePresently being triaged by the triage team
    on May 13, 2022
  6. TahaTesser
    self-assigned this
    on May 13, 2022
  7. TahaTesser
    changed the title [-]Material 3 AppBar with a TabBar body doesn't use appropriate tab icon colors and doesn't activate its scroll-under behavior in Flutter 3.0.0[/-] [+][Material 3] `AppBar` with a `TabBar` doesn't use appropriate tab label color[/+] on May 13, 2022

  8. TahaTesser commented on May 13, 2022

    @TahaTesser
    TahaTesser
    on May 13, 2022
    Contributor

    These are two issues with different natures of fixes, Let's relabel this issue for tab label colors.

    Filed #103698 for scroll under issue.

  9. TahaTesser
    added
    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
    on May 23, 2022
  10. guidezpl
    added this to Material 3on May 23, 2022
  11. guidezpl
    moved this to 🗺 Planned in Material 3on May 23, 2022
  12. guidezpl
    changed the title [-][Material 3] `AppBar` with a `TabBar` doesn't use appropriate tab label color[/-] [+]`AppBar` with a `TabBar` doesn't use appropriate tab label color[/+] on May 24, 2022
  13. helinanever
    moved this to PR submitted in Nevercodeon Jul 18, 2022
  14. helinanever
    added this to Nevercodeon Jul 18, 2022
  15. guidezpl
    moved this from 🗺 Planned to 🚧 In Progress in Material 3on Sep 6, 2022
  16. TahaTesser
    moved this from PR submitted to In progress in Nevercodeon Sep 20, 2022

  17. TahaTesser commented on Sep 20, 2022

    @TahaTesser
    TahaTesser
    on Sep 20, 2022
    Contributor

    Fixing #111962 should also fix this issue.

  18. Piinks
    added
    P2Important issues not at the top of the work list
    on Oct 20, 2022
  19. TahaTesser
    moved this from In progress to PR submitted in Nevercodeon Nov 28, 2022

  20. TahaTesser commented on Nov 30, 2022

    @TahaTesser
    TahaTesser
    on Nov 30, 2022
    Contributor

    #116110 landed, it should fix this issue.

  21. TahaTesser
    closed this as completedon Nov 30, 2022
  22. Repository owner moved this from 🚧 In Progress to ✅ Done in Material 3on Nov 30, 2022
  23. Repository owner moved this from PR submitted to Done (PR merged) in Nevercodeon Nov 30, 2022
  24. TahaTesser
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Nov 30, 2022

  25. github-actions commented on Mar 5, 2023

    @github-actions
    github-actionsbot
    on Mar 5, 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.

  26. github-actions
    locked as resolved and limited conversation to collaborators on Mar 5, 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 version

Type

No type

Projects

  • Nevercode
    Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions