AppBar text not seen in light mode

Hi, I ve just realized that the text and back icon of AppBar is white, so not visible on my app.

The code in the theme file looks ok: I tried chaning foreground color to something else, but UI does not care :slight_smile:

      appBarTheme: const AppBarTheme(
        backgroundColor: Colors.white,

When I switch to dark mode, everything is ok.
Screenshot below… (edit: sorry! since I am a new user, I am not allowed to upload photos :frowning: )

I opened the starter project from github, and I am using my real device to run the apps.

Just curious. Does it work on an emulator?

Let me check on emulator and reply soon.!

Trying again to upload SSs:



1 Like

I just opened the final code from github and run the app both on Android emulator and iOS simulator.
The result is the same.

Ekran Resmi 2021-11-04 23.10.25

ioS Emulator:
Ekran Resmi 2021-11-04 23.14.02|230x500

Additionally, I changed the AppBarTheme as follows for both light and dark theme in FooderlichTheme class. And I saw no effect !

      appBarTheme: const AppBarTheme(
        foregroundColor: Colors.yellow,

However, if I comment out backgroundColor in onboarding_screen.dart

appBar: AppBar(
        //backgroundColor: Colors.transparent,
        elevation: 0.0,

Then the appbar color returns to red! But the text color is not affected :slight_smile:

I am totally confused now :smiley: :smiley:

Red Appbar here:
Ekran Resmi 2021-11-04 23.31.47|230x500


Have you try a “flutter clean” with your terminal ?

Which chapter is this?

Chapter 7, Routes & Navigation

This one is work for me, Really appreciate for help.