It's not working properly anymore

[tuliogd]

I've been using signals for a while and I have some projects done with it. However, after updating, the ".watch(context)" became deprecated and I made the necessary replacements, but several states (the app's theme, for example) are having trouble reacting, not changing at all or partially changing.
What happened? I can't find anything in the documentation.

[rodydavis]

Can you share code to reproduce? I wrap the material app with a watch widget usually

[tuliogd]

Unfortunately it didn't work.

See the example below:

decoration: BoxDecoration(
              color: pageContext.primaryContainerColor,
            ),

How could I put a Watch to return a color?

[rodydavis]

You would put a Watch on the nearest widget! So like the container in this case.

[tuliogd]

I've already done this, as stated above. Unfortunately it doesn't really work.

[rodydavis]

I really need a minimal full example to validate and step through. Would it be possible to extract the bits to produce the error?

[tuliogd]

I'll try.

This is the app.dart:

import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';

import '../controllers/theme_controller.dart';
import '../controllers/user_controller.dart';
import '../helpers/easyloading_helper.dart';
import '../helpers/route_generator_helper.dart';
import 'platforms/web_app.dart';

final class App extends StatelessWidget {
  //+ ============================================================================
  //+ ||                             STATIC SECTION                             ||
  //+ ============================================================================

  //--> STATIC PUBLIC FIELDS

  static const supportedLocales = [
    Locale('pt', 'BR'),
  ];
  static const title = 'DConsole';
  static const localizationsDelegates = [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ];
  static const routeGenerator = RouteGeneratorHelper.generateRoute;
  static Widget Function(BuildContext, Widget?)? builder() =>
      EasyLoadingHelper.init();

  //+ ============================================================================
  //+ ||                            PUBLIC SECTION                              ||
  //+ ============================================================================

  //--> CONSTRUCTORS

  const App({super.key});

  //--> PUBLIC METHODS

  @override
  Widget build(BuildContext context) => FutureBuilder(
        future: Future.wait(
          [
            ThemeController.instance.loadFromSettings(),
            UserController.instance.loadUser(),
          ],
        ),
        builder: (_, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            //->> LIBERATE SPLASH SCREEN
            FlutterNativeSplash.remove();
            //->> ----------------------

            if (kIsWeb) return const WebApp();

            throw UnsupportedError('Platform not supported');
          }

          //->> IT'S BELOW THE SPLASH SCREEN
          return const SizedBox.shrink();
          //->> ----------------------------
        },
      );
}

This is the web_app.dart:

import 'package:dft/libraries/dft_functionalities.dart';
import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

import '../../constants/named_routes_constants.dart';
import '../../controllers/theme_controller.dart';
import '../../controllers/user_controller.dart';
import '../app.dart';

class WebApp extends StatelessWidget {
  //+ ============================================================================
  //+ ||                            PUBLIC SECTION                              ||
  //+ ============================================================================

  //--> CONSTRUCTORS

  const WebApp({super.key});

  //--> PUBLIC METHODS

  @override
  Widget build(BuildContext context) => DFTKeyboardDismiss(
        app: Watch(
          (_) => MaterialApp(
            theme: ThemeController.instance.appTheme.value.themeData,
            debugShowCheckedModeBanner: false,
            title: App.title,
            supportedLocales: App.supportedLocales,
            localizationsDelegates: App.localizationsDelegates,
            onGenerateRoute: App.routeGenerator,
            builder: App.builder(),
            initialRoute:
                UserController.instance.isLogged ? homeRoute : authRoute,
          ),
        ),
      );
}

This is the ThemeController:

import 'package:signals/signals.dart';

import '../enums/app_theme_enum.dart';
import '../helpers/easyloading_helper.dart';
import '../repositories/settings_repository.dart';

final class ThemeController {
  //+ ============================================================================
  //+ ||                             STATIC SECTION                             ||
  //+ ============================================================================

  //--> STATIC PUBLIC FIELDS

  static final instance = ThemeController();

  //+ ============================================================================
  //+ ||                            PUBLIC SECTION                              ||
  //+ ============================================================================

  //--> PUBLIC GETTERS

  Signal<AppTheme> get appTheme => _appTheme;

  //--> PUBLIC SETTERS

  set setTheme(AppTheme value) {
    _appTheme.value = value;

    _settingsRepository.setAppTheme(_appTheme.value);

    _setEasyLoadingTheme();
  }

  //--> PUBLIC METHODS

  Future<void> loadFromSettings() async {
    _appTheme = signal(
      await _settingsRepository.getAppTheme(),
    );

    _setEasyLoadingTheme();
  }

  //+ ============================================================================
  //+ ||                             PRIVATE SECTION                            ||
  //+ ============================================================================

  //--> PRIVATE FIELDS

  late Signal<AppTheme> _appTheme;
  final _settingsRepository = SettingsRepository();

  //--> PRIVATE METHODS

  void _setEasyLoadingTheme() => EasyLoadingHelper.setEasyLoadingTheme(
        backgroundColor: _appTheme.value.themeData.colorScheme.primaryContainer,
        foregroundColor:
            _appTheme.value.themeData.colorScheme.onPrimaryContainer,
      );
}

This is the AppTheme enum:

import 'package:flutter/material.dart';

enum AppTheme {
  light(1, 'light'),
  dark(2, 'dark'),
  system(0, 'system');

  //+ ============================================================================
  //+ ||                            PUBLIC SECTION                              ||
  //+ ============================================================================

  //--> PUBLIC FIELDS

  final int asInt;
  final String asString;

  //--> CONSTRUCTORS

  const AppTheme(
    this.asInt,
    this.asString,
  );

  //--> PUBLIC GETTERS

  ThemeData get themeData => switch (this) {
        AppTheme.light => _lightMaterialTheme,
        AppTheme.dark => _darkMaterialTheme,
        AppTheme.system => switch (
              WidgetsBinding.instance.platformDispatcher.platformBrightness) {
            Brightness.light => _lightMaterialTheme,
            Brightness.dark => _darkMaterialTheme,
          },
      };

  //+ ============================================================================
  //+ ||                             STATIC SECTION                             ||
  //+ ============================================================================

  //--> STATIC PUBLIC METHODS

  static AppTheme fromInt(int value) => switch (value) {
        1 => light,
        2 => dark,
        0 => system,
        _ => system,
      };

  //--> STATIC PRIVATE FIELDS

  static final _lightMaterialTheme = ThemeData(
    inputDecorationTheme: const InputDecorationTheme(
      errorMaxLines: 10,
      helperMaxLines: 10,
    ),
    colorScheme: _lightColorScheme,
  );

  static final _darkMaterialTheme = ThemeData(
    inputDecorationTheme: const InputDecorationTheme(
      errorMaxLines: 10,
      helperMaxLines: 10,
    ),
    colorScheme: _darkColorScheme,
  );

  static const _lightColorScheme = ColorScheme(
    brightness: Brightness.light,
    primary: Color(0xff0f6681),
    surfaceTint: Color(0xff0f6681),
    onPrimary: Color(0xffffffff),
    primaryContainer: Color(0xffbce9ff),
    onPrimaryContainer: Color(0xff001f29),
    secondary: Color(0xff166683),
    onSecondary: Color(0xffffffff),
    secondaryContainer: Color(0xffc0e8ff),
    onSecondaryContainer: Color(0xff001e2b),
    tertiary: Color(0xff006a60),
    onTertiary: Color(0xffffffff),
    tertiaryContainer: Color(0xff9ef2e4),
    onTertiaryContainer: Color(0xff00201c),
    error: Color(0xffba1a1a),
    onError: Color(0xffffffff),
    errorContainer: Color(0xffffdad6),
    onErrorContainer: Color(0xff410002),
    surface: Color(0xfff5fafd),
    onSurface: Color(0xff171c1f),
    onSurfaceVariant: Color(0xff40484c),
    outline: Color(0xff70787d),
    outlineVariant: Color(0xffc0c8cc),
    shadow: Color(0xff000000),
    scrim: Color(0xff000000),
    inverseSurface: Color(0xff2c3134),
    onInverseSurface: Color(0xffedf1f5),
    inversePrimary: Color(0xff8ad0ee),
    primaryFixed: Color(0xffbce9ff),
    onPrimaryFixed: Color(0xff001f29),
    primaryFixedDim: Color(0xff8ad0ee),
    onPrimaryFixedVariant: Color(0xff004d63),
    secondaryFixed: Color(0xffc0e8ff),
    onSecondaryFixed: Color(0xff001e2b),
    secondaryFixedDim: Color(0xff8dcff1),
    onSecondaryFixedVariant: Color(0xff004d66),
    tertiaryFixed: Color(0xff9ef2e4),
    onTertiaryFixed: Color(0xff00201c),
    tertiaryFixedDim: Color(0xff82d5c8),
    onTertiaryFixedVariant: Color(0xff005048),
    surfaceDim: Color(0xffd6dbde),
    surfaceBright: Color(0xfff5fafd),
    surfaceContainerLowest: Color(0xffffffff),
    surfaceContainerLow: Color(0xfff0f4f8),
    surfaceContainer: Color(0xffeaeef2),
    surfaceContainerHigh: Color(0xffe4e9ec),
    surfaceContainerHighest: Color(0xffdee3e6),
  );

  static const _darkColorScheme = ColorScheme(
    brightness: Brightness.dark,
    primary: Color(0xff8ad0ee),
    surfaceTint: Color(0xff8ad0ee),
    onPrimary: Color(0xff003545),
    primaryContainer: Color(0xff004d63),
    onPrimaryContainer: Color(0xffbce9ff),
    secondary: Color(0xff8dcff1),
    onSecondary: Color(0xff003547),
    secondaryContainer: Color(0xff004d66),
    onSecondaryContainer: Color(0xffc0e8ff),
    tertiary: Color(0xff82d5c8),
    onTertiary: Color(0xff003732),
    tertiaryContainer: Color(0xff005048),
    onTertiaryContainer: Color(0xff9ef2e4),
    error: Color(0xffffb4ab),
    onError: Color(0xff690005),
    errorContainer: Color(0xff93000a),
    onErrorContainer: Color(0xffffdad6),
    surface: Color(0xff0f1417),
    onSurface: Color(0xffdee3e6),
    onSurfaceVariant: Color(0xffc0c8cc),
    outline: Color(0xff8a9296),
    outlineVariant: Color(0xff40484c),
    shadow: Color(0xff000000),
    scrim: Color(0xff000000),
    inverseSurface: Color(0xffdee3e6),
    onInverseSurface: Color(0xff2c3134),
    inversePrimary: Color(0xff0f6681),
    primaryFixed: Color(0xffbce9ff),
    onPrimaryFixed: Color(0xff001f29),
    primaryFixedDim: Color(0xff8ad0ee),
    onPrimaryFixedVariant: Color(0xff004d63),
    secondaryFixed: Color(0xffc0e8ff),
    onSecondaryFixed: Color(0xff001e2b),
    secondaryFixedDim: Color(0xff8dcff1),
    onSecondaryFixedVariant: Color(0xff004d66),
    tertiaryFixed: Color(0xff9ef2e4),
    onTertiaryFixed: Color(0xff00201c),
    tertiaryFixedDim: Color(0xff82d5c8),
    onTertiaryFixedVariant: Color(0xff005048),
    surfaceDim: Color(0xff0f1417),
    surfaceBright: Color(0xff353a3d),
    surfaceContainerLowest: Color(0xff0a0f11),
    surfaceContainerLow: Color(0xff171c1f),
    surfaceContainer: Color(0xff1b2023),
    surfaceContainerHigh: Color(0xff262b2d),
    surfaceContainerHighest: Color(0xff303538),
  );
}

This is a bit that doesn't work right:

part of '../home_view.dart';

//+ ============================================================================
//+ ||                              PRIVATE CLASS                             ||
//+ ============================================================================

final class _HomeDrawerHeader extends Watch {
  //--> FIELDS

  final HomeController pageController;
  final BuildContext pageContext;
  final bool narrow;

  //--> CONSTRUCTORS

  _HomeDrawerHeader(
    this.pageController,
    this.pageContext,
    this.narrow,
  ) : super(
          (_) => DrawerHeader(
            decoration: BoxDecoration(
              color: pageContext.primaryContainerColor,
            ),
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.topLeft,
                  child: ProfilePictureWithEditOverlay(
                    profilePictureUrl:
                        UserController.instance.profilePicture.value,
                    size: 68,
                    border: true,
                    borderWidth: 2,
                    borderColor: pageContext.secondaryColor,
                    hover: pageController.profilePictureHover.value,
                    onHover: (hover) =>
                        pageController.setProfilePictureHover = hover,
                    onTap: () =>
                        pageController.changeProfilePicture(pageContext),
                  ),
                ),
                Align(
                  alignment: Alignment.bottomLeft,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      DFTLabelText.large(
                        pageContext,
                        text: UserController.instance.nome,
                        textColor: pageContext.onPrimaryContainerColor,
                        overflow: TextOverflow.ellipsis,
                      ),
                      DFTLabelText.medium(
                        pageContext,
                        text: UserController.instance.email,
                        textColor: pageContext.onPrimaryContainerColor,
                        overflow: TextOverflow.ellipsis,
                      ),
                      DFTLabelText.small(
                        pageContext,
                        text: UserController.instance.formattedCpfCnpj,
                        textColor: pageContext.onPrimaryContainerColor,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                Align(
                  alignment: Alignment.topRight,
                  child: IconButton(
                    style: IconButton.styleFrom(
                      hoverColor:
                          pageContext.onPrimaryContainerColor.withOpacity(0.08),
                      focusColor:
                          pageContext.onPrimaryContainerColor.withOpacity(0.12),
                      highlightColor:
                          pageContext.onPrimaryContainerColor.withOpacity(0.12),
                    ),
                    icon: Icon(
                      switch (ThemeController.instance.appTheme.value) {
                        AppTheme.light => Icons.dark_mode_sharp,
                        AppTheme.dark => Icons.brightness_auto_sharp,
                        AppTheme.system => Icons.light_mode_sharp,
                      },
                      color: pageContext.onPrimaryContainerColor,
                    ),
                    tooltip: switch (ThemeController.instance.appTheme.value) {
                      AppTheme.light => 'Mudar para o tema escuro',
                      AppTheme.dark => 'Mudar para tema automático',
                      AppTheme.system => 'Mudar para o tema claro',
                    },
                    onPressed: () => pageController.setTheme(pageContext),
                  ),
                ),
              ],
            ),
          ),
        );
}

I already tried putting Watch on particular widgets in the bit above.

This is the themeSetter:

void setTheme(BuildContext context) =>
      switch (ThemeController.instance.appTheme.value) {
        AppTheme.light => ThemeController.instance.setTheme = AppTheme.dark,
        AppTheme.dark => ThemeController.instance.setTheme = AppTheme.system,
        AppTheme.system => ThemeController.instance.setTheme = AppTheme.light,
      };

[rodydavis]

I am going to roll back my decision on deprecating the watch extension. I think it is still worth keeping. but I will still. be deprecating .listen and .bindSignal

[tuliogd]

Very Nice! Thank you, brother.