Flutter: ColorScheme.secondary never applied to set accent color

Question

My code - accent color set with deprecated accentColor property, it works, red color applied:

return VersionBanner(
      text: "DEV",
      visible: globals.isDev,
      location: BannerLocation.bottomEnd,
      child: MaterialApp(
        title: 'MyApp',
        theme: ThemeData(
          accentColor: Colors.red,
          appBarTheme: AppBarTheme(
            elevation: 0,
            backgroundColor: Colors.white,
            foregroundColor: Colors.black,
            systemOverlayStyle: overlayStyle,
          ),
          scaffoldBackgroundColor: Colors.white,
          primaryColor: Colors.white,
          textTheme: AppTheme.textTheme,
          pageTransitionsTheme: PageTransitionsTheme(builders: {
            TargetPlatform.android: ZoomPageTransitionsBuilder(),
            TargetPlatform.iOS: CupertinoPageTransitionsBuilder()
          }),
        ),
        home: globals.isLogged ? HomePage() : LoginPage(),
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          DefaultMaterialLocalizations.delegate,
          DefaultCupertinoLocalizations.delegate
        ],
        supportedLocales: [
          const Locale('pl', 'PL'),
        ],
        routes: routes,
      ),
    );

I migrated to ColorScheme call this way:

return VersionBanner(
      text: "DEV",
      visible: globals.isDev,
      location: BannerLocation.bottomEnd,
      child: MaterialApp(
        title: 'MyApp',
        theme: ThemeData(
          appBarTheme: AppBarTheme(
            elevation: 0,
            backgroundColor: Colors.white,
            foregroundColor: Colors.black,
            systemOverlayStyle: overlayStyle,
          ),
          scaffoldBackgroundColor: Colors.white,
          primaryColor: Colors.white,
          textTheme: AppTheme.textTheme,
          pageTransitionsTheme: PageTransitionsTheme(builders: {
            TargetPlatform.android: ZoomPageTransitionsBuilder(),
            TargetPlatform.iOS: CupertinoPageTransitionsBuilder()
          }), colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.red),
        ),
        home: globals.isLogged ? HomePage() : LoginPage(),
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          DefaultMaterialLocalizations.delegate,
          DefaultCupertinoLocalizations.delegate
        ],
        supportedLocales: [
          const Locale('pl', 'PL'),
        ],
        routes: routes,
      ),
    );

But accent color is never applied in this case, no mater what secondary color is set, accent color is always blue. So - deprecated approach works just fine, new approach does not.

Any ideas?

Answer 1

If you looking for color changes for Radio and Checkbox then it pick up the accent color from toggleableActiveColor theme property.

You need to use that property in the theme like this.

    theme: ThemeData(
     //...
      toggleableActiveColor : Colors.red
    //...
    home: ...,
    localizationsDelegates: [
      //...
    ],
    supportedLocales: [
      const Locale('pl', 'PL'),
    ],
    routes: routes,
  ),

For more properties changes check this document .