CODEWITHSUNDEEP
flutter
Dhia Shalabi
Dhia Shalabi

Reputation: 1530

How to change the `primary color` for ThemeData dark in flutter?

I am using flutter 2.8.0 to create a simple app. But when I am trying to change the primary color for the App it does not work with me.

This is the code I am working on:

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        primaryColor: const Color(0xFF0A0E21),
        scaffoldBackgroundColor: const Color(0xFF0A0E21),
      ),
      home: const InputPage(),
    );
  }
}

Upvotes: 10

Views: 8273

Answers (4)

Mohd.Zafranudin
Mohd.Zafranudin

Reputation: 454

I faced the same issue, but in my case I'm using the seeds and useMaterial3: true.

This solves it for me, to keep consistency between light and dark mode themes.

The only difference is to just add brightness: Brightness.dark to the seed.

return MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
        seedColor: const Color(0xFF57CC99)),
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
        brightness: Brightness.dark, // <-- the only line added
        seedColor: const Color(0xFF57CC99)),
  ),
);

Upvotes: 4

Chandresh 204
Chandresh 204

Reputation: 350

I found a solution for me..

MaterialColor _primartSwatch = Colors.purple;

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      themeMode: _themeMode,
      theme: ThemeData(
        primarySwatch: _primartSwatch,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: _primartSwatch,
      ),
      home: SplashScreen(),
    );
  }

Upvotes: 0

Jahidul Islam
Jahidul Islam

Reputation: 12565

@Mrinal already mentioned you to use primarySwatch. Flutter team intended to build clean up the Theme system and make everything more consistent and based off of the ColorScheme colors. They recommend using color scheme instead of primary color

 theme: ThemeData(
     primaryColor: ColorsX.primary,
     colorScheme: ColorScheme.light().copyWith(primary: ColorsX.primary),
  );

For dark theme

theme: ThemeData.dark().copyWith(
        colorScheme: ColorScheme.light().copyWith(primary: Colors.tealAccent),
        ),

output:

enter image description here

For more read this article article

Upvotes: 4

Mrinal Jain
Mrinal Jain

Reputation: 927

Use primarySwatch

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

Upvotes: 0

Related Questions