5
 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?"

Rohith Nambiar
  • 2,957
  • 4
  • 17
  • 37
Sam
  • 51
  • 1
  • 2

4 Answers4

7

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.

Rohith Nambiar
  • 2,957
  • 4
  • 17
  • 37
  • 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? https://api.flutter.dev/flutter/material/ThemeData/primaryColor.html – Sam Feb 20 '22 at 13:03
  • 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? – Rohith Nambiar Feb 20 '22 at 15:16
  • 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 Feb 20 '22 at 16:21
  • 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. – Sam Feb 20 '22 at 16:27
  • I have edited my answer with answers to your questions – Rohith Nambiar Feb 21 '22 at 06:36
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.

Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
2
MaterialApp(
  theme: ThemeData.dark().copyWith(
    primaryColor: Color(0xFF090C22),
    backgroundColor: Color(0xFF090C22),
    scaffoldBackgroundColor: Color(0xFF090C22),
    appBarTheme: AppBarTheme(
      backgroundColor: Color(0xFF090C22),
    ),
  ),
);
Xbenardo
  • 21
  • 2
0

I am also doing the same course on udemy and using colorscheme as below worked for me. Primary color applied to appbar.

colorScheme: const ColorScheme.light(primary: Colors.red,secondary: Colors.white)

kajal kuwar
  • 1