Skip to content

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

@parnic

Description

@parnic

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

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found 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 onr: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions