Repository navigation
AppBar with a TabBar doesn't use appropriate tab label color #103642
Description
Activity
- 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 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.
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!
- 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 These are two issues with different natures of fixes, Let's relabel this issue for tab label colors.
Filed #103698 for scroll under issue.
Reacted by parnic- 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 Fixing #111962 should also fix this issue.
#116110 landed, it should fix this issue.
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 -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Mar 5, 2023
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listFound to occur in 3.0Found to occur in 3.1flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer version
Type
Projects
- Status
Steps to Reproduce
flutter runon the code sampleExpected results:
Actual results:
With Material 3 enabled on a light theme, the AppBar:
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:
Things are pretty okay in dark mode:
