ThemeData primaryColor not changing appBar background color

Question

 class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: InputPage(),
    );

I am taking this course: https://www.udemy.com/course/flutter-bootcamp-with-dart/

and with the section on themes she uses this exact code to turn her appBar red. My code does not display any errors, however my appBar remains the default theme.

The description of primary color here: https://api.flutter.dev/flutter/material/ThemeData-class.html

It doesn't say it is depreciated, or indicate any recent changes.

My question is not "how can I make my app bar red", but rather, "why does this code not perform as expected?"

Solution 1

PrimaryColor won't work in themeData directly you have to declare it in colorScheme

theme: ThemeData(colorScheme: ColorScheme.light(primary: Colors.red)),

You can either use primarySwatch

theme: ThemeData(primarySwatch: Colors.red),

or you can use appBarTheme

appBarTheme: AppBarTheme(
    backgroundColor: Colors.red
),

primarySwatch is not a Color. It's MaterialColor. Which means it's a the different shades of a color a material app will use.

primaryColor is one of those shades. To be exact, primaryColor is normally equal to primarySwatch[500]

ThemeData is one holding all of your theme settings, and the one controlling how the app will look, but ColorScheme is just a set of colors that you create to easily maintain the app's colors. Notice that ThemeData class has a parameter colorScheme, so you can create your own colorScheme and add it to the ThemeData object.

all of widgets styling inherits from colors or themes from ThemeData (defined in MaterialApp) not ColorScheme, colorScheme is just extra colors that you define to use whether in ThemeData or anywhere across the app.

Solution 2

AppBar background color comes from appBarTheme(color:..).

I prefer extending parent theme,

return MaterialApp(
  primaryColor: Colors.green,// no effect on AppBar
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context).appBarTheme.copyWith(
          color: Colors.red,
        ),
  ),

More about theme.

Comments

[Sam]

Thank you. I have enough to move forward, but I have un unquenched curiosity about this subject. Is this a recent update? Is there any clear documentation on this change of syntax? Is primaryColor still listed as a property of theme data because it now does something else? api.flutter.dev/flutter/material/ThemeData/primaryColor.html

[Rohith Nambiar]

I think AppBar can only accept MaterialColor rather than Color that's why it uses primarySwatch and not primaryColor, but I am not sure if it's because of this that primaryColor does not work, could you accept the answer if it solved your problem?

[Sam]

I have solved my problem, I actually had accomplished what i needed to before posting any of this. My inquiry is trying to deepen my knowledge on the matter. I appreciate all the input, there are now several ways I know of to work with theme and colors that work. My inquiry is an open one, I don't even know which question to ask. So here are some. I know some have good answers I can find here or elsewhere, I am not requesting direct answers, I just want to show where my mind is at with it.

[Sam]

What does the primaryColor property of theme data do? Why were these changes made? Why is scaffoldBackgroundColor a property of ThemeData instead of Color Scheme? and of course, what is the difference between swatch color and material color? this last one is common enough to find, but I feel like the answer to it is intertwined with the answer to the others.

[Rohith Nambiar]

I have edited my answer with answers to your questions

[Sam]

You are amazing my friend this does make a lot more sense!

[Rohith Nambiar]

No problem, happy to help, even I learned a lot!!

[Rohith Nambiar]

Can you accept the answer if it helped you