CODEWITHSUNDEEP
flutter
GoonGamja
GoonGamja

Reputation: 2286

Why primarySwatch color is not applied when colorScheme is used in Flutter?

I am new to flutter and very confused of setting color in theme property inside MaterialApp.

Here is my code.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Playground',
      theme: ThemeData(
        primarySwatch: Colors.red,
        colorScheme: ThemeData().colorScheme.copyWith(
              secondary: Colors.pink[300],
              tertiary: Colors.purple[200],
            ),
        canvasColor: Color.fromARGB(249, 220, 224, 220),
        // brightness: Brightness.dark),
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => Tabs(),
        GridItemDetailList.routeName: (context) => GridItemDetailList()
      },
    );
  }
}

Inside of ThemeData, I am using primarySwatch and colorScheme. Originally I was using accentColor but changed to colorScheme since it has been deprecated.

However colorScheme property does not work as I expected.

When I comment out colorScheme, primarySwatch color which is red is applied to the appBar very well.

But when colorScheme is used, primarySwatch color is not applied to the appBar, it shows default color of material app.

Why colorScheme does not work as same as accentColor? Should I not use primarySwatch with colorScheme in order to customize its color?

Upvotes: 0

Views: 1165

Answers (1)

usama
usama

Reputation: 21

Because all Material components used 'ColorScheme' and 'Text Theme' by default for UI Visual properties.

Official Documentation says:

The [colorScheme] and [textTheme] are used by the Material components to compute default values for visual properties. see image

After Specifying ColorScheme, You can use its primarySwatch constructor to provide primarySwatch but primary swatch on ThemeData class does not work in this case.

 ThemeData(
fontFamily: 'Lato',
 colorScheme: ColorScheme.fromSwatch(primarySwatch: AppColors.primary).copyWith(
  secondary: AppColors.secondary,
).copyWith(primary: Colors.amber, secondary: Colors.red,));

Official documentation says about PrimarySwtach:

For historical reasons, instead of using a [colorSchemeSeed] or [colorScheme], you can provide either a [primaryColor] or [primarySwatch] to construct the [colorScheme], but the results will not be as complete as when using generation from a seed color.see image

Upvotes: 1

Related Questions