CODEWITHSUNDEEP
flutterflutter-theme
EhCanadianGuy27 COD
EhCanadianGuy27 COD

Reputation: 337

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

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

Upvotes: 31

Views: 35174

Answers (18)

Amit chaudhary
Amit chaudhary

Reputation: 61

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

Upvotes: 1

Akarsh regunta
Akarsh regunta

Reputation: 1

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

This is updated snippet for using primary color

Upvotes: 0

Ahmadreza Shamimi
Ahmadreza Shamimi

Reputation: 73

also, you can try colorScheme

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

Upvotes: 0

Luiz Claro
Luiz Claro

Reputation: 11

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

Upvotes: 1

K K Muhammed Fazil
K K Muhammed Fazil

Reputation: 713

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

Upvotes: 1

SHASHANK SHEKHAR
SHASHANK SHEKHAR

Reputation: 1

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.

Upvotes: 0

Benny Moshi
Benny Moshi

Reputation: 1

This worked for me.

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

Upvotes: 0

Tushar Katyal
Tushar Katyal

Reputation: 422

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

Upvotes: 0

Komron-Mirzo
Komron-Mirzo

Reputation: 21

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(),
  );
 }
}

Upvotes: 2

Nicholas Ekubi
Nicholas Ekubi

Reputation: 15

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(),
    );
  }
}

Upvotes: -1

Arsh Ansari
Arsh Ansari

Reputation: 9

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

Upvotes: 0

okatarismet
okatarismet

Reputation: 376

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

Upvotes: 18

Abdulsalam Al-Hammadi
Abdulsalam Al-Hammadi

Reputation: 187

U can Use :

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

Upvotes: 0

İbrahim Baba
İbrahim Baba

Reputation: 1

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

Upvotes: 0

Divy Bhatnagar
Divy Bhatnagar

Reputation: 261

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

Upvotes: 26

Shibi Narayanan
Shibi Narayanan

Reputation: 11

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

Upvotes: 1

Mohtashim
Mohtashim

Reputation: 369

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(),
    );
  }
}

enter image description here

Upvotes: 5

adamu_fura
adamu_fura

Reputation: 819

Use primarySwatch

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

Upvotes: 22

Related Questions