Why is primaryColorDark lighter than the primaryColor?

Question

I added a custom primarySwatch and noticed this happening. I shared the link to a screenshot of the colors i get from Theme.of(context) and primaryColorDark is clearly lighter than primaryColor, which obviously defeats the purpose. Can anyone suggest me a solution?

Also, is there a way to manually set the primaryColor, primaryColorDark, highlightColor etc for Theme.of(context)?

My main.dart file:

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations(
    [DeviceOrientation.portraitUp],
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {

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

  final MaterialColor themeColor = MaterialColor(0xff2C6CB0, color);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => AuthProvider(),
        ),
      child: MaterialApp(
        title: 'Flutter App',
        theme: ThemeData(
          primarySwatch: themeColor,
        ),
        routes: {
          ServicesScreen.routeName: (ctx) => ServicesScreen(),
        },
        home: SplashScreen(),
      ),
    );
  }
}

My ServicesScreen():

class ServicesScreen extends StatelessWidget {
  static const routeName = '/services-screen';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('My Services'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            height: 50,
            color: Theme.of(context).primaryColorLight,
            child: Text('Primary Light'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).primaryColor,
            child: Text('Primary'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).primaryColorDark,
            child: Text('Primary Dark'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).accentColor,
            child: Text('Accent'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).highlightColor,
            child: Text('Highlight'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).backgroundColor,
            child: Text('Background'),
          ),
        ],
      ),
    );
  }
}

Link to the output i get

Solution

First,there is a way to set the colors of primaryColor and primaryDarkColor inside a theme like this:

  static Color lightPrimary = //This is color;
  static Color darkPrimary = //This is color;
  static Color lightAccent = //This is color;
  static Color darkAccent = //This is color;
  static Color lightBG = //This is color;
  static Color darkBG = //This is color;
  static Color badgeColor = //This is color;

  static ThemeData appTheme = ThemeData(
    backgroundColor: lightBG,
    primaryColor: lightPrimary,
    accentColor: lightAccent,
    cursorColor: lightAccent,
    scaffoldBackgroundColor: lightBG,
    buttonColor: lightBG);

Then in your MaterialApp set the theme to this one: theme: appTheme,

and you can use all of the colors by using the Theme.of(context).//exampleColor

I would recommend you to move to this option because it could be that your main error comes from letting the swatch decide between the colors you gave it,and it doesn't differentiate between the shades.

Comments

[Hassan Hammad]

Thank you, this is exactly what i was looking for.