CODEWITHSUNDEEP
flutterdartflutter-theme
Sam
Sam

Reputation: 71

ThemeData primaryColor not changing appBar background color

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

Upvotes: 7

Views: 7940

Answers (4)

kajal kuwar
kajal kuwar

Reputation: 1

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)

Upvotes: 0

Xbenardo
Xbenardo

Reputation: 41

MaterialApp(
  theme: ThemeData.dark().copyWith(
    primaryColor: Color(0xFF090C22),
    backgroundColor: Color(0xFF090C22),
    scaffoldBackgroundColor: Color(0xFF090C22),
    appBarTheme: AppBarTheme(
      backgroundColor: Color(0xFF090C22),
    ),
  ),
);

Upvotes: 4

Rohith Nambiar
Rohith Nambiar

Reputation: 3730

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.

Upvotes: 8

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63604

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.

Upvotes: 2

Related Questions