ThemeData primaryColor not changing appBar background color-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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
),