How to use signals as class property?

[Wizzel1]

I would like a simple example of how to use signals as class properties.

This is what I tried:

import 'package:signals/signals.dart';

class Calculator {
  final result = signal<double>(0.0);

  void add(double a, double b) {
    result.value = a + b;
  }
}

class Test extends StatelessWidget {
  Test({super.key});
  final calculator = Calculator();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Watch((context) => Text("${calculator.result}")),
            OutlinedButton(
                onPressed: () {
                  calculator.add(1, 3);
                },
                child: Text("add"))
          ],
        ),
      ),
    );
  }
}

but this doesn't update the UI. What did I do wrong? I saw the shopping_cart example but I didn't really understand it.

Edit: I found a working solution, please tell me if this is wrong:

class Test extends StatelessWidget {
  Test({super.key});
  final calculator = Calculator();
  @override
  Widget build(BuildContext context) {
    final result = calculator.result.watch(context);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("$result"),
            OutlinedButton(
                onPressed: () {
                  calculator.add(1, 3);
                },
                child: Text("add"))
          ],
        ),
      ),
    );
  }
}

[snakeshift]

mayby lack of .value.
and also If I were you, I want to write like this.

class Test extends StatelessWidget {
  Test({super.key});
  final calculator = Calculator();

  @override
  Widget build(BuildContext context) {
    final Calculator(:result, :add) = calculator; // ☆

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Watch((context) => Text("${result.value}")),
            OutlinedButton(
                onPressed: () {
                  add(1, 3);
                },
                child: Text("add"))
          ],
        ),
      ),
    );
  }
}