What is the difference between ThemeData(primaryColor: Colors.red) and providing one with ColorScheme.primary

Question

I am new to Flutter and did not get the difference. What is the difference between providing a color through

primaryColor like theme: ThemeData(primaryColor: Colors.red)

AND

colorScheme like theme: ThemeData(colorScheme: ThemeData().colorScheme.copyWith(primary: Color.red))

So assuming this, If I set both primaryColor and colorScheme.primary to different colors, What change in UI we will get. Please check the example below:

Widget build(BuildContext context) {
    final ColorScheme colorScheme = ColorScheme(
      primary: Color(0xFFFFFFFF), // <---- I set white color here
      primaryVariant: Color(0xFF117378),
      secondary: Color(0xFFEFF3F3),
      secondaryVariant: Color(0xFFFAFBFB),
      background: Color(0xFF636363),
      surface: Color(0xFF808080),
      onBackground: Colors.white,
      error: _lightFillColor,
      onError: _lightFillColor,
      onPrimary: _lightFillColor,
      onSecondary: Color(0xFF322942),
      onSurface: Color(0xFF241E30),
      brightness: Brightness.light,
    );
    return Theme(
      data: Theme(
        primaryColor: Colors.red, // <----- I set color to red
        colorScheme: colorScheme //  <----- colorScheme.primary is white
      ),
      child: child
    );
  }
}

Solution

ANSWER 2.0

After a bit of a research, I want to tell you that, Flutter is now moving toward using ColorScheme() extensively, and not primaryColor from ThemeData()

Now coming to the point, first let us understand what these two are in our ThemeData

1. primaryColor is responsible of setting the theme and background color of the app thorughout
2. colorScheme, on the other hand is a set of twelve colors based on the Material spec that can be used to configure the color properties of most components.

WHY PRIMARY, NOT COLORSCHEME: This is because, if you want to use colorscheme, then you need to define all the predefined elements inside the ColorScheme class, which is not feasible in current case.

Also, primaryColor always is priority responsible for the theme of the app.

ColorScheme can be used to assign color to the widget like cards, materialbuttons etc, without even effecting the current theme of the app, with the usage of Theme.of(context).colorScheme.primary

Let us take a look at the example:

class MyApp extends StatelessWidget {
  final ColorScheme colorScheme = ColorScheme(
    primary: Color(0xFFFFFFFF), // <---- I set white color here
    primaryVariant: Color(0xFF117378),
    secondary: Color(0xFFEFF3F3),
    secondaryVariant: Color(0xFFFAFBFB),
    background: Color(0xFF636363),
    surface: Color(0xFF808080),
    onBackground: Colors.white,
    error: Colors.redAccent,
    onError: Colors.redAccent,
    onPrimary: Colors.redAccent,
    onSecondary: Color(0xFF322942),
    onSurface: Color(0xFF241E30),
    brightness: Brightness.light,
  );
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.red,
        colorScheme: colorScheme
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

USING PRIMARY COLOR AND COLORSCHEME IN MYHOMEPAGE

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Container()
       )
    );
  }
}

So, if you closely, see this, the primaryColor is not mentioned in the MYHOMEPAGE, it will inherit it's parent primaryColor, not colorScheme.

Now, to note that, colorScheme can be used explicitly to define the color of a widget.

Also, colorScheme.copyWith() will do nothing but make changes to the color property inside the currently existing color, without effecting the global colorScheme color property, for instance primary.

Let us see the usage, if we want to use colorScheme in our theme

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.primary, // <-- Setting the color of the appbar explicitely using colorScheme
          title: Text(widget.title),
        ),
        body: Center(
          child: Container()
       )
    );
  }
}

Now we get this result, that the background becomes white now

Gist

1. Theme primaryColor and other color property will always be preferred over colorScheme.
2. To use colorScheme, first you need to define your custom colorScheme in your main.dart file, and then make use by using in another instances for setting background etc.

In order to get more details, please read from these documentations:

• ColorScheme Class
• colorScheme property
• Material Design
• ThemeData Class

Comments

[Rahmat Ali]

I am aware of using these two ideas you provided. But I am not getting the difference of setting the color property. What will be changed if I set color through ThemeData(primaryColor: Colors.red) and by setting the primary property of colorScheme in ThemeData(colorScheme). What UI change will be achieved, If I set both to different. I will update the question if required, but now it looks to me fine. Thanks

[Alok]

@RahmatAli I have updated my whole answer. Hope it will help you :) Let me know

[Rahmat Ali]

Thanks for such a big example. So it means we can set some secondary theme in our main theme by using colorScheme and we required it, we can use it . That's good.

[Alok]

Thank you @RahmatAli, that your question gave me a chance to explore more about flutter. Happy learning :)