ThemData(colorScheme: xxx) vs ThemeData.from(colorScheme: xxx)?

[jomoka]

@salmankhilji thanks for the interesting question.

By diving into the ThemeData documentation and implementation here is the reason why the background color is blue vs white in some cases.

Using ThemeData Constructor

When you used the ThemeData constructor:

ThemeData(
        colorScheme: Theme.of(context).colorScheme.copyWith(
              primary: Colors.grey,
              secondary: Colors.black,
            ),
      ),

By default scaffoldBackgroundColor takes the canvasColor as shown below:

This is why the background color is set to grey[50] (Almost white looking)

Using ThemeData.from

In the case when you changed to use the ThemeData.from

ThemeData.from(
        colorScheme: Theme.of(context).colorScheme.copyWith(
              primary: Colors.grey,
              secondary: Colors.black,
            ),
      ),

What you did here was:

1. Take the existing colorScheme from the context, and create a new copy but only set primary and secondary color.

The reason why the background is light blue in this case is because the default background color uses primarySwatch which is set to blue by default. You will have to update the colorScheme’s background color in this case.

Here is a screenshot of the ThemeData constructor:

You will notice that the default colorScheme’s backgroundColor is also set to blue.

When you look at the ThemeData.from constructor, you will see it uses colorScheme.background to set the scaffoldBackgroundCOlor

You can check out the entire ThemeData constructor implementation here:

ThemeData constructor - ThemeData - material library - Dart API

Hope this is helpful!