SettingsTile trailing widget not appearing on Web

[guskuma]

When using SettingsTile on web trailing widget is not shown.

my code:

return SettingsList(
                  applicationType: ApplicationType.material,
                  // platform: DevicePlatform.android,
                  sections: [
                    SettingsSection(
                      title: Text(
                        'Integrações',
                        style: Theme.of(context).textTheme.labelLarge,
                      ),
                      tiles: <SettingsTile>[
                        SettingsTile(
                          leading: const Icon(Icons.calendar_month_outlined),
                          title: const Text('Google Calendar'),
                          description: const Text('Você precisa autorizar o app Agente WSP a acessar sua agenda'),
                          trailing: FilledButton(
                            onPressed: () async {
                              if(!_isWaiting) {
                                _isWaiting = true;
                                var result = await FirebaseFunctions.instance.httpsCallable('getAuthURL').call();
                                launchUrl(
                                    Uri.parse(result.data),
                                    mode: LaunchMode.externalApplication
                                );
                              }
                            },
                            child: const Text('Autorizar'),
                          ),
                        ),
                        SettingsTile.switchTile(
                          onToggle: (value) {
                            context.read<UserPreferencesProvider>().savePreference('whatsAppDesktopEnabled', value);
                          },
                          initialValue: context.watch<UserPreferencesProvider>().preferences!.whatsAppDesktopEnabled,
                          leading: const Icon(FontAwesomeIcons.squareWhatsapp),
                          title: const Text('WhatsApp Desktop'),
                          description: const Text('Na versão Web, cria links para o WhatsApp Desktop'),
                        ),
                      ],
                    ),
                    SettingsSection(
                      title: Text(
                          'Gerenciamento',
                          style: Theme.of(context).textTheme.labelLarge,
                      ),
                        tiles: [
                          SettingsTile.navigation(
                            title: const Text('Números de WhatsApp'),
                            leading: const Icon(FontAwesomeIcons.whatsapp),
                          ),
                          SettingsTile.navigation(
                            title: const Text('Dispositivos'),
                            leading: const Icon(FontAwesomeIcons.mobileScreenButton),
                          ),
                    ])
                  ],
                );

android screen:

web screen:

[RemcoSchrijver]

Having the same issue while using settings_ui 2.0.2

Looking at the code for web it looks like it should render normally so not really sure what is going on here.

flutter-settings-ui/lib/src/tiles/platforms/web_settings_tile.dart

Lines 114 to 144 in a2565cb

	if (trailing != null && tileType == SettingsTileType.switchTile)
	Row(
	children: [
	trailing!,
	Padding(
	padding: const EdgeInsetsDirectional.only(end: 8),
	child: Switch(
	activeColor: activeSwitchColor ??
	Color.fromRGBO(138, 180, 248, 1.0),
	value: initialValue,
	onChanged: onToggle,
	),
	),
	],
	)
	else if (tileType == SettingsTileType.switchTile)
	Padding(
	padding:
	const EdgeInsetsDirectional.only(start: 16, end: 8),
	child: Switch(
	value: initialValue,
	activeColor: activeSwitchColor ??
	Color.fromRGBO(138, 180, 248, 1.0),
	onChanged: onToggle,
	),
	)
	else if (trailing != null)
	Padding(
	padding: const EdgeInsets.symmetric(horizontal: 16),
	child: trailing!,
	),

Looking further into it, trailing is broken for every tiletype at the moment.

[RemcoSchrijver]

Alright I figured it out, the commit fixing this is not released yet @M-ixai-L do you see a chance to release #127 as a new version?

Right now for 2.0.2 the code looks like this

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,
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

For now @guskuma and others you can use the git import instead of the pub package in your pubspec.yaml like so:

  settings_ui:
    git:
      url: https://github.com/yako-dev/flutter-settings-ui
      ref: 56f4f1b812b76d95ac86377504bc6bb144718497

Pegging to the specific commit that fixed trailing, or if you are feeling more adventurous you can reference master like so:

  settings_ui:
    git:
      url: https://github.com/yako-dev/flutter-settings-ui
      ref: master

[Schrolli91]

Please trigger a new release, because i need this feature and i dont want to use a dev if possible.