Web: activeSwitchColor in switchTile not working

[nietsmmar]

I did set activeSwitchColor which does work in android and iOS but in Web the color just won't change from standard blue.

[M-ixai-L]

Hey, @stephen-yu-gh, I'm sorry, but I have not found this problem, could you provide a code example?

[Spiderbezno]

In my case in a web on windows platform work fine, but in mac OS the colour does not change, always is the green color with Cupertino style

[lucasoares]

Same here.. Trying to run in Chrome device and the switch color never changes even hardcoding it

[Spiderbezno]

I think that it is necessary to add this activeColor in the constructor of Switch.adaptive to add custom colour and take effect in the browsers on mac,

activeColor: this attribute is required to work fine

in the file WebSettingsTile.dart

in the Switch.adaptive is not applied the property activeColor and the attribute activeSwitchColor of the constructor are never used

with this code work fine the colour:

Switch.adaptive(
value: initialValue,
onChanged: onToggle,
activeColor: activeSwitchColor,

[yadaniyil]

@Spiderbezno thanks for you comment. I was about to try your fix but there is no Switch.adaptive in the WebSettingsTile.dart. Could you explain here?

[Spiderbezno]

@yadaniyil this code is found in the WebSettingsTile in line 124

but it is not the same code on the library downloaded from pub.dev that I can see here in GitHub,

this is the code of the file when I inspect the widget settings_ui: ^2.0.2

in the .pub-cache --> settings_ui-2.0.2-->lib-->src-->tiles-->platforms-->web_settings_tiles.dart:

`import 'package:flutter/material.dart';
import 'package:settings_ui/settings_ui.dart';
import 'package:settings_ui/src/utils/settings_theme.dart';

class WebSettingsTile extends StatelessWidget {
const WebSettingsTile({
required this.tileType,
required this.leading,
required this.title,
required this.description,
required this.onPressed,
required this.onToggle,
required this.value,
required this.initialValue,
required this.activeSwitchColor,
required this.enabled,
required this.trailing,
Key? key,
}) : super(key: key);

final SettingsTileType tileType;
final Widget? leading;
final Widget? title;
final Widget? description;
final Function(BuildContext context)? onPressed;
final Function(bool value)? onToggle;
final Widget? value;
final bool initialValue;
final bool enabled;
final Widget? trailing;
final Color? activeSwitchColor;

@OverRide
Widget build(BuildContext context) {
final theme = SettingsTheme.of(context);
final scaleFactor = MediaQuery.of(context).textScaleFactor;

final cantShowAnimation = tileType == SettingsTileType.switchTile
    ? onToggle == null && onPressed == null
    : onPressed == null;

return IgnorePointer(
  ignoring: !enabled,
  child: Material(
    color: Colors.transparent,
    child: InkWell(
      onTap: cantShowAnimation
          ? null
          : () {
              if (tileType == SettingsTileType.switchTile) {
                onToggle?.call(!initialValue);
              } else {
                onPressed?.call(context);
              }
            },
      highlightColor: theme.themeData.tileHighlightColor,
      child: Container(
        child: Row(
          children: [
            if (leading != null)
              Padding(
                padding: const EdgeInsetsDirectional.only(
                  start: 24,
                ),
                child: IconTheme(
                  data: IconTheme.of(context).copyWith(
                    color: theme.themeData.leadingIconsColor,
                  ),
                  child: leading!,
                ),
              ),
            Expanded(
              child: Padding(
                padding: EdgeInsetsDirectional.only(
                  start: 24,
                  end: 24,
                  bottom: 19 * scaleFactor,
                  top: 19 * scaleFactor,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    DefaultTextStyle(
                      style: TextStyle(
                        color: theme.themeData.settingsTileTextColor,
                        fontSize: 18,
                        fontWeight: FontWeight.w400,
                      ),
                      child: title ?? Container(),
                    ),
                    if (value != null)
                      Padding(
                        padding: EdgeInsets.only(top: 4.0),
                        child: DefaultTextStyle(
                          style: TextStyle(
                            color: theme.themeData.tileDescriptionTextColor,
                          ),
                          child: value!,
                        ),
                      )
                    else if (description != null)
                      Padding(
                        padding: EdgeInsets.only(top: 4.0),
                        child: DefaultTextStyle(
                          style: TextStyle(
                            color: theme.themeData.tileDescriptionTextColor,
                          ),
                          child: description!,
                        ),
                      ),
                  ],
                ),
              ),
            ),
            // if (tileType == SettingsTileType.switchTile)
            //   SizedBox(
            //     height: 30,
            //     child: VerticalDivider(),
            //   ),
            if (tileType == SettingsTileType.switchTile)
              Padding(
                padding:
                    const EdgeInsetsDirectional.only(start: 16, end: 8),
                child: Switch.adaptive(
                  value: initialValue,
                  onChanged: onToggle,
                ),
              ),
          ],
        ),
      ),
    ),
  ),
);

}
}
`

[yadaniyil]

@Spiderbezno I just checked the version from the pub.dev and it's really an issue in that version. Fixed in the new one, that is not been deployed yet. Thanks for your explanations. This will be deployed soon.

[Spiderbezno]

HI,

when will be deployed the version with this correction?