CODEWITHSUNDEEP
flutterdartthemedata
jonnyf
jonnyf

Reputation: 21

Flutter ThemeData

I want to set a ThemeData in my project but I can't set the correct background color. I think that the problem is about brightness....

theme: ThemeData(
        colorScheme: ColorScheme(
          primary: Color(0xFF0A0E21),
          onBackground: Colors.white,
          onError: Colors.yellow,
          onSecondary: Colors.white,
          onSurface: Colors.white,
          background: Colors.yellow,
          secondary: Colors.purple,
          surface: Color(0xFF0A0E21),
          secondaryVariant: Colors.white,
          error: Colors.red,
          primaryVariant: Color(0xFF0A0E21),
          onPrimary: Color(0xFF0A0E21),
          brightness: Brightness.dark,
        ),
      ),

Brightness can't be null so how can I solve to have the right color in background? I read that background for ThemeData has a space between element when I scroll down. So how can I set the ThemeData background correctly for my scaffold?

Upvotes: 0

Views: 1679

Answers (3)

Abdullah Bahattab
Abdullah Bahattab

Reputation: 716

you need to use the code like below

return MaterialApp(
  theme: ThemeData(
    colorScheme: const ColorScheme.dark(
      primary: Color(0xffbb86fc),
      primaryVariant: Color(0xff3700B3),
      secondary: Color(0xffcf6679),
      secondaryVariant: Color(0xff03dac6),
      surface: Color(0xffcf6679),
      background: Color(0xff121212),
      error: Color(0xffcf6679),
      onPrimary: Colors.black,
      onSecondary: Colors.black,
      onSurface: Colors.white,
      onBackground: Colors.white,
      onError: Colors.black,
      brightness: Brightness.dark,
    ),
  ),
  home: const YourPage(), 
);

in this case any property is not required so change the colors as you wish.

Upvotes: 0

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63604

Instead of passing ThemeData, use Theme.of(context).copyWith(). Also, I would say use themeMode and darkTheme.

Rather than overriding everything, it often makes sense to extend the parent theme. You can handle this by using the copyWith() method.

 theme: Theme.of(context).copyWith(
        colorScheme: const ColorScheme(
          primary: Color(0xFF0A0E21),
          onBackground: Colors.white,
          onError: Colors.yellow,
          onSecondary: Colors.white,
          onSurface: Colors.white,
          background: Colors.yellow,
          secondary: Colors.purple,
          surface: Color(0xFF0A0E21),
          secondaryVariant: Colors.white,
          error: Colors.red,
          primaryVariant: Color(0xFF0A0E21),
          onPrimary: Color(0xFF0A0E21),
          brightness: Brightness.dark,
        ),

for more themes

Upvotes: 0

Tim Jacobs
Tim Jacobs

Reputation: 1193

You can set the scaffoldBackgroundColor of your themeData like so.

theme: ThemeData(
        colorScheme: ColorScheme(
          primary: Color(0xFF0A0E21),
          onBackground: Colors.white,
          onError: Colors.yellow,
          onSecondary: Colors.white,
          onSurface: Colors.white,
          background: Colors.yellow,
          secondary: Colors.purple,
          surface: Color(0xFF0A0E21),
          secondaryVariant: Colors.white,
          error: Colors.red,
          primaryVariant: Color(0xFF0A0E21),
          onPrimary: Color(0xFF0A0E21),
          brightness: Brightness.dark,
        ),
        scaffoldBackgroundColor: Colors.yellow,
      ),

Upvotes: 1

Related Questions