AppBar.brightness not changing the title widget text color

Steps to Reproduce

Create this app:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
//           backgroundColor: Colors.black.withOpacity(.01),
//           brightness: Brightness.light,
        title: Text('App Name'),
          ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4);
  }
}

uncomment the two commented lines
The title text stays white

Expected results:
I expected the title text to go dark. The icons in the status bar of the phone go dark, but not the text of the title.

Actual results:
The text in the title widget remains white

I understand that I can update the primaryColorBrightness in the main theme. However, it seems wrong to change the primary color brightness on the whole app just to adjust the color of an AppBar.

Am I over looking something simple?

Reproduces with current master 1.20.0-8.0.pre.125,
Related to #50606

@AirborneEagle

@AirborneEagle I totally agree with you that one would expect the brightness setting of the AppBarTheme to actually modify its textTheme and iconThemes to be black on light brightness and white on dark brightness, unless its text and icon themes are explicitly specified to be something else.

Sadly it does not appear to do any other things than carry the info, which may or may not be helpful to have sometimes, at least if it is actually set correctly in relation to the AppBarTheme's color.

One could even argue that if you only specify the color of the appbar in a theme, that this should compute the correct brightness automatically, set its value and then also trigger the text and icon color suitable for the brightness of the appbar color. But none of that happens either. No, this is not a new thing, it has been like this, well always I think.

Note that this is not the only issue with the appbar. It is currently very difficult when you make your overall theme, to also make an AppBarTheme with a color that is of Brightness.light, often white (a popular design), for an overall "light" theme, when the light theme has a primaryColor that is of Brightness.dark. Which would be the case most of the times, as you want a nice contrast on white for the primaryColor in a light theme.

The reason why this is tricky, is because in Flutter the Material Design appbar's default textTheme is tied to the primaryTextTheme, not to the textTheme of the overall theme. So in a light theme with a dark primary color, it wants to be white by default. This means we cannot even just make a TextTheme() for the AppBarTheme's textTheme property, which yes will be black by default in an overall light theme. However, if you do this out of a build context, the AppBar's textTheme will not get any geometry applied to it later in the app. Geometry is just a fancy word for the text theme's correct default font sizes and letter spacing. If you build a modified ThemeData object after you have a context, then you can just do a textTheme: TextTheme() for the appBarTheme's text property in the ThemeData object and be happy. Of course, you then have to then get that fed back into your MaterialApp's theme property if you want it correctly applied to the entire app.

If you do not have a context yet, say you are creating ThemeData for MaterialApp that you will instantiate and build as the next step(s), then you can of course still apply any selected Typography geometry before you have a context and get the right sized fonts. BUT, the default textTheme geometry is actually also localized to be a bit different for certain languages, so then you won't get that localized geometry applied to the AppBar's textTheme().

More info

I was looking into this topic in this related issue #50606.

You can read my discovery journey there, when I finally figured out what was going on. I had been hitting my head against a wall on this light appbar theme topic for a long time and got this urge to understand what is going on with it, and wrote down what I found as I studied it. I documented my findings in the above related issue, I thought it might be helpful to other's also struggling with making a light AppBarTheme for a ThemeData that has a dark primaryColor.

It really should be simpler than it is now, if the defined AppBarTheme's color brightness would adjust AppBarTheme brightness, that then flips typography and icon color, well that would really be neat and simple.

@rydmike

@rydmike - if you have time to take a look at #71184, I'd appreciate your feedback. The overall goal there is to make configuring AppBars relatively straightforward. To that end I've retired the brightness property, which was only ever used to implicitly set the SystemUiOverlayStyle, and added a foregroundColor property.

There are many other changes, however the idea related to this issue is that if you want to override the AppBar's default foreground and background colors, you can do so explicitly.

@HansMuller

Thanks @HansMuller, nice work! Looks good. I added a longer comment here #71184 (comment).

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.

Navigation Menu

Repository navigation

AppBar.brightness not changing the title widget text color #61618

Steps to Reproduce

More info

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

AppBar.brightness not changing the title widget text color #61618

Description

Steps to Reproduce

Activity

VladyslavBondarenko commented on Jul 16, 2020

rydmike commented on Jul 22, 2020

More info

HansMuller commented on Dec 1, 2020

rydmike commented on Dec 2, 2020

github-actions commented on Aug 2, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions