Bug: createComputedAsync Not Updating Correctly

[mcmah309]

Example

import 'dart:async';

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

void main() {
  SignalsObserver.instance = LoggingSignalsObserver();
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  ThemeData createTheme(BuildContext context, Brightness brightness) {
    return ThemeData(
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
        brightness: brightness,
      ),
      brightness: brightness,
      useMaterial3: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: createTheme(context, Brightness.light),
      darkTheme: createTheme(context, Brightness.dark),
      themeMode: ThemeMode.system,
      home: const CounterExample(),
    );
  }
}

class CounterExample extends StatefulWidget {
  const CounterExample({super.key});

  @override
  State<CounterExample> createState() => _CounterExampleState();
}

class _CounterExampleState extends State<CounterExample> with SignalsMixin {
  late final Signal<int> signal = createSignal(0);
  late final FutureSignal<int> computed = createComputedAsync(() async {
    await Future.delayed(const Duration(seconds: 2));
    return signal.value;
  });
  // Sync version works
  // late final Computed<int> computedSync = createComputed(() {
  //   return signal.value;
  // });

  void _increment() {
    signal.value++;
    // Works if uncommented
    // computed.reload();
  }

  @override
  Widget build(BuildContext context) {
    String state = switch (computed.value) {
      AsyncDataReloading<int>(:final value) => "Reloading: $value",
      AsyncDataRefreshing<int>(:final value) => "Refreshing: $value",
      AsyncData<int>(:final value) => "Data: $value",
      AsyncError<int>() => "Error",
      AsyncLoading<int>() => "Loading",
    };
    // String state = computedSync.value.toString();
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'State is: ',
            ),
            Text(
              state,
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Behavior

The initial state is Loading then after two seconds Data: 0 is displayed. Which is expected. But, if the "increment" button is hit, the widget is rebuilt, but computed function is never called again, thus the result is still Data: 0.

The expected behavior, would be the once signal.value is updated through _increment, the state changes to Reloading: 0, then after two seconds, the state becomes Data: 1.

[mcmah309]

Might be semi intended behavior, I see

It is important that signals are called before any async gaps with await.

In the docs. Makes sense, otherwise it wouldn't be known which signal the value was accessed from.

If I move signal.value before any await the state changes to Loading, while it should be Reloading: 0. But the final result is Data: 1, as expected.

[rodydavis]

That is correct, this is to match Angular behavior! You can add them manually in the dependencies array

[mcmah309]

So

the state changes to Loading, while it should be Reloading: 0

Seems like the only unintended behavior here.