Flutter ThemeData Primary color not changing from theme when trying to add a primary color

Question

Im following the BMI Calculator app from the London App Brewery on LinkedIn Learning. when attempting to set the primaryColor to red, my emulator still shows the Light Blue default AppBar even though i am overriding the Primary Color. here's the code

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: const InputPage(),
    );
  }
}

class InputPage extends StatefulWidget {
  const InputPage({Key? key}) : super(key: key);

  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BMI CALCULATOR'),
      ),
      body: const Center(
        child: Text('Body Text'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

Your code is still good ! You may pay attention on reinstalling your app or check if hot reload is working — F Perroch, Sep 13 '21 at 21:38

score 23 · Answer 1 · answered Sep 13 '21 at 21:34

23

Use primarySwatch

theme: ThemeData(
    primarySwatch: Colors.red,
  ),

answered Sep 13 '21 at 21:34

adamu_fura

773
1
6
14

How would you use a hex color? – skr Oct 20 '21 at 09:15
1

check out this article on dev https://dev.to/rohanjsh/custom-swatch-for-material-app-theme-primaryswatch-3kic – adamu_fura Oct 23 '21 at 07:21

score 22 · Answer 2 · answered Nov 01 '21 at 06:43

22

I am also attending same training from LondonAppBrewery. This code fixed the problem.

Widget build(BuildContext context) {
return MaterialApp(
  title: "BMI Calculator",
  debugShowCheckedModeBanner: false,
  theme: ThemeData.dark().copyWith(
    appBarTheme:AppBarTheme(
      backgroundColor: Color(0xff0a0e21),
    ),
    scaffoldBackgroundColor: Color(0xff0a0e21),
  ),
  home: InputPage(),
);

answered Nov 01 '21 at 06:43

Divy Bhatnagar

221
1
2

1

thanks bro, same here following her course – ali masarra Dec 12 '21 at 07:33
This worked for me, but the course video is still not updated by the instructor. :( – Chandra Shekhar Aug 19 '23 at 19:05

score 11 · Answer 3 · answered Feb 13 '22 at 22:14

11

This issue has been pointed at flutter github page. They say

We will eventually be moving all components away from ThemeData.primaryColor

So you can use

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

answered Feb 13 '22 at 22:14

okatarismet

276
2
5

score 4 · Answer 4 · answered Sep 24 '21 at 15:48

Using the following approach you can have full control over the individual properties in Themedata

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.pink,
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.orangeAccent,
        ),
      ),
      home: InputPage(),
    );
  }
}

score 1 · Answer 5 · edited Oct 24 '21 at 04:00

1

I'm undergoing the same training program. As Mohtashim mentioned above, I tried to tweak the background app theme code and it worked as expected.

theme: ThemeData(
  primarySwatch: Colors.pink,
  appBarTheme: AppBarTheme(
    backgroundColor: Color(0xFF101427), //use your hex code here
  ),
)

edited Oct 24 '21 at 04:00

Troll

1,895
3
15
34

answered Oct 21 '21 at 14:17

Shibi Narayanan

11
1

Komron-Mirzo · Answer 6 · 2022-05-27T14:14:23.443

1

I also figured out just like you guys answered above. However, in dark design there was a shadowColor missing, so I added it.

@override
Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: Color(0xFF0a0e21),
      elevation: 5.0,
      shadowColor: Colors.black87,
    ),
    primaryColor: const Color(0xFF0A0E21),
    colorScheme: ColorScheme.fromSwatch().copyWith(
      secondary: const Color(0xFF101427),
    ),
    scaffoldBackgroundColor: const Color(0xFF0A0E21),
    ),
    home: const MainPage(),
  );
 }
}

edited May 27 '22 at 14:14

answered May 27 '22 at 14:13

Komron-Mirzo

11
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 27 '22 at 14:39

score 1 · Answer 7 · answered Oct 31 '22 at 06:33

If you want to add default colors that provide by flutter you can change like this.

theme: ThemeData(
    primaryColor: Colors.red,
    primarySwatch: Colors.red,
  ),

If you want to use custom colors, you can use like this

 static const Color primaryColor = Color(0xFF623CEA);

  static MaterialColor primaryColorSwatch = MaterialColor(
    primaryColor.value,
    const <int, Color>{
      50: Color(0xFF623CEA),
      100: Color(0xFF623CEA),
      200: Color(0xFF623CEA),
      300: Color(0xFF623CEA),
      400: Color(0xFF623CEA),
      500: Color(0xFF623CEA),
      600: Color(0xFF623CEA),
      700: Color(0xFF623CEA),
      800: Color(0xFF623CEA),
      900: Color(0xFF623CEA),
    },
  );

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: primaryColor,
        primarySwatch: primaryColorSwatch,
      ),
      home: Demo(),
    );

score 0 · Answer 8 · answered Nov 06 '21 at 12:55

0

theme: ThemeData.dark().copyWith(
        colorScheme: ColorScheme.light(
          primary: Color(0xFF0A0E21),
        ),
        scaffoldBackgroundColor: Color(0xFF0A0D22),
      ),

answered Nov 06 '21 at 12:55

İbrahim Baba

1

1

Welcome to Stack Overflow, and thank you for contributing an answer. Would you kindly edit your answer to to include an explanation of your code? That will help future readers better understand what is going on, and especially those members of the community who are new to the language and struggling to understand the concepts. That's especially important when there's already four other answers that have been submitted. Under what conditions might your approach be preferred? Are you taking advantage of different capabilities? E.g., why do you prefer `colorScheme` over `primarySwatch`? – Jeremy Caney Nov 07 '21 at 00:48

score 0 · Answer 9 · answered Dec 18 '21 at 16:44

0

U can Use :

    theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.red,
        )
    )

answered Dec 18 '21 at 16:44

Abdulsalam Al-Hammadi

139
1
4

score 0 · Answer 10 · answered May 10 '22 at 12:32

Try this code for changing app bar color worked for me,replace the color code as per ur need

 Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
        appBarTheme: AppBarTheme(
          backgroundColor: Color(0xFF0A0E21),
        ),
        accentColor: Colors.purple,
      ),
      home: InputPage(),
    );

score 0 · Answer 11 · answered Jun 21 '22 at 07:56

0

@override
Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorScheme: ColorScheme.light()
              .copyWith(primary: Colors.red, secondary: Colors.red))),
      home: InputPage(),
    );
  }

answered Jun 21 '22 at 07:56

Tushar Katyal

412
5
12

score 0 · Answer 12 · answered Sep 01 '22 at 08:46

This worked for me.

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(appBarTheme: AppBarTheme(color: Color(0xff0a0e21))),
      home: InputPage(),
    );
  }
}

SHASHANK SHEKHAR · Answer 13 · 2022-10-31T06:20:21.340

So for hex color, we need to use MaterialColor() of primarySwatch. And for Material color, there are two arguments required, hex color and Map data for the shades of the color. First create a Map variable, color, outside the stateless widget:

Map<int, Color> color =
{
  50:Color.fromRGBO(136,14,79, .1),
  100:Color.fromRGBO(136,14,79, .2),
  200:Color.fromRGBO(136,14,79, .3),
  300:Color.fromRGBO(136,14,79, .4),
  400:Color.fromRGBO(136,14,79, .5),
  500:Color.fromRGBO(136,14,79, .6),
  600:Color.fromRGBO(136,14,79, .7),
  700:Color.fromRGBO(136,14,79, .8),
  800:Color.fromRGBO(136,14,79, .9),
  900:Color.fromRGBO(136,14,79, 1),
};

And then: primarySwatch: MaterialColor(0xFF0A0E21,color),

This will work.

score 0 · Answer 14 · answered Jan 05 '23 at 20:35

The most complete way to do it would be to set the colorScheme property inside ThemeData().

In the ColorScheme class itself you can either decide to set manually all of the color groups, like so:

theme: ThemeData(
   colorScheme: ColorScheme(
       brightness: Brightness.light,
       primary: Colors.red,
       onPrimary: Colors.white,
       secondary: Colors.green,
       onSecondary: Colors.white,
       error: Colors.yellow,
       onError: Colors.black,
       background: Colors.white,
       onBackground: Colors.black,
       surface: Colors.grey,
       onSurface: Colors.black,
   ),
),

Or you can decide to use the ColorScheme.fromSwatch() constructor to create a swatch:

theme: ThemeData(
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: Colors.green,
    accentColor: Colors.amber,
  ),
),

score 0 · Answer 15 · answered Mar 31 '23 at 04:09

0

also, you can try colorScheme

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

answered Mar 31 '23 at 04:09

Ahmadreza Shamimi

37
1
11

Akarsh regunta · Answer 16 · 2023-04-08T08:01:17.417

0

theme: ThemeData(
        colorSchemeSeed: const Color(0xFF0A0E21))

This is updated snippet for using primary color

edited Apr 08 '23 at 08:01

answered Apr 08 '23 at 08:00

Akarsh regunta

1
2

score 0 · Answer 17 · answered Jul 20 '23 at 20:42

theme: ThemeData(
        useMaterial3: false,

Make this false - useMaterial3: false,

*Make this false - useMaterial3: false *I had an issue where I was not able to change color inside "theme: *ThemeData( *primaryColor: Color(0xff24386e), *primarySwatch: MaterialColor( *---- *----

*it was started because of a flutter (3.13.0-7.0.pre.46 ), OS (16.5.1) of *IOS and OS (13.4.1 (c)) of Macbook which I upgrade to the latest.

I am using Dart 3.1.0

score -1 · Answer 18 · answered May 11 '22 at 19:19

I follow the same course. This is the code that helped me. Also thank you guys for answering the questions above. I nearly pulled out my hair. If anyone knows why flutter changes and deprecates syntax so dramatically please explain. It would be nice to know.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          backgroundColor: Color(0xff0a0e21),
        ),
        primaryColor: Color(0xFF0A0E21),
        scaffoldBackgroundColor: Color(0xFF0A0E21),
        colorScheme: ColorScheme.fromSwatch().copyWith(
          secondary: Colors.purple,
        ),
      ),
      home: InputPage(),
    );
  }
}

Flutter ThemeData Primary color not changing from theme when trying to add a primary color

18 Answers18