Watch doesn't trigger rebuild on signal if used in a nested Builder

[SPiercer]

there's another weird behaviour i have found when using signals in such way

so i have declared my signals as usual

final selectedPostSignal = signal<SelectedPost?>(null);

and in my widget down below i'm using

Watch.builder(
  builder: (_){
    return Column(
      children: [
        SomeWidget(),
        SomeOtherWidget(),
        if (selectedPostSignal.value?.id == post.id)
          PostDetails(post: post),
      ],
    )
  }
)

if i did this it would never work and never rebuild if somewhere else i changed selectedPostSignal

i have to assign it to a variable to work

Watch.builder(
  builder: (_){
    final selectedPost = selectedPostSignal.value;
    return Column(
      children: [
        SomeWidget(),
        SomeOtherWidget(),
        if (selectedPost?.id == post.id)
          PostDetails(post: post),
      ],
    )
  }
)

and volla!, magically it works.

please validate this with me rody, if that's a malpractice of me.

[rodydavis]

This should be equivalent! Not sure why one is working and the other is not.

Do you have a complete example to test with?

[SPiercer]

It's quite strange that when i made a simple counter app example, it worked flawlessly.

---

but for if you can read it out idk if i'm doing anything wrong in this app here but

that's the page i'm working on atm
it's a legacy code we're running on 5.5.0 and the code is bad but i'm refactoring atm

i redacted many irrelevant widgets for you to read easier

final selectedPostSignal = Ref.scoped(
  (_) => signal<SocialPost?>(null, debugLabel: 'selectedPostSignal'),
  autoDispose: false,
);

final selectedProfileSignal = Ref.scopedFamily(
  (_, int customerId) => futureSignal<SocialProfile>(
    () async {
      return Supabase.instance.client
          .from('social_profiles')
          .select('*, posts:social_posts(*)')
          .eq('customer_id', customerId)
          .single()
          );
    },
    debugLabel: 'selectedProfileSignal',
  ),
  autoDispose: false,
);

class SocialProfileScreen extends StatefulWidget {
  final int? customerId;
  const SocialProfileScreen({super.key, this.customerId});

  @override
  State<SocialProfileScreen> createState() => _SocialProfileScreenState();
}

class _SocialProfileScreenState extends State<SocialProfileScreen>
    with SignalsMixin {

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Text(
          'Social management',
          style: context.textTheme.displaySmall
              ?.copyWith(fontWeight: FontWeight.w600),
        ),
        const Gap(16),
        Expanded(
          child: Row(
            children: [
              Watch.builder(
                builder: (context) {
                  final profileSignal =
                      selectedProfileSignal.of(context, widget.customerId);

                  final selectedPost = selectedPostSignal.of(context).value;

                  return profileSignal.value.map(
                    loading: () => CenterLoading(
                      indicatorColor: context.colorScheme.primary,
                    ),
                    error: (error) => Center(child: Text('Error: $error')),
                    data: (profile) => Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const SocialTabs(),
                        ReorderableGridView.builder(
                          itemBuilder: (context, index) {
                            final post = posts.value[index];

                            return Stack(
                              key: ValueKey(index),
                              children: [
                                PostCard(
                                  post: post,
                                  isPinned: post.isPinned,
                                  onTap: (post) => selectedPostSignal
                                      .of(context)
                                      .value = post,
                                ),
                                if (selectedPost?.id == post.id)
                                  Text(post.postDateFormatted),
                              ],
                            );
                          },
                        ),
                      ],
                    ),
                  );
                },
              ),
              const Gap(16),
              Watch.builder(
                builder: (context) {
                  final selectedPost = selectedPostSignal.of(context);
                  if (selectedPost.value == null) return const SizedBox();
                  return const Expanded(child: CommentsView());
                },
              ),
            ],
          ),
        ),
      ],
    );
  }
}

so if we zoom in on the ReordableGridView

that's the working example where i have selectedPost assigned to a variable

ReorderableGridView.builder(
  itemBuilder: (context, index) {
    final post = posts.value[index];

    return Stack(
      key: ValueKey(index),
      children: [
        PostCard(
          post: post,
          isPinned: post.isPinned,
          onTap: (post) => selectedPostSignal
              .of(context)
              .value = post,
        ),
        if (selectedPost?.id == post.id)
          Text(post.postDateFormatted),
      ],
    );
  },
),

but if I changed it to be if (selectedPostSignal .of(context) .value?.id == post.id)

it never get updated from the onTap thus the if condition is never met EXCEPT FOR THE FIRST TIME ONLY when it was null and then got assigned to a value, then it never gets reassigned/updated

[rodydavis]

That is because .of(context) is inside a builder context for the list view and not a Watch.builder.

The signal would not be updated because it is only reading the value and not bound to that context.

You could try .watch(context)

[SPiercer]

You are right!

it's because of the listview context not the Watch.builder, however it's not about the .of(context) i removed it in the example is got the weird behaviour

i tried using .watch but still same issue, things inside builders don't count. i was testing the counter app on latest version though.

here's the counter app example

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

final selectedCounter = signal<int?>(null, debugLabel: 'selectedCounter');
void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    _counter++;
    if (_counter == 3) {
      selectedCounter.value = 3;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Watch.builder(
          debugLabel: 'counter widget',
          builder: (context) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
                // Comment these two lines to watch the strange behavior
                if (selectedCounter.watch(context) == _counter)
                  const Text('Without Builder: EQUAL'),
                Builder(builder: (_) {
                  if (selectedCounter.watch(context) == _counter) {
                    return const Text('With Builder: EQUAL');
                  } else {
                    return const Text('With Builder: NOT EQUAL');
                  }
                })
              ],
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

[icnahom]

@rodydavis Not sure if it's related but this also doesn't work as expected. It's going to be a lot of work to find builders and add Watch in them.

final count = signal(0);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Watch.builder(builder: (context) {
        return Center(
          child: LayoutBuilder(
            builder: (context, constraints) {
              return Text(
                '$count',
                style: Theme.of(context).textTheme.headlineMedium,
              );
            },
          ),
        );
      }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          count.value++;
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

[rodydavis]

This is expected and why .watch has to be called in the scope of the nearest builder element.

One of the reasons I didn't do a custom element was because of this issue I faced

[icnahom]

This is expected

Expected from implementation point of view, but not from usability. We are accustomed to think that everything wrapped is some builder would rebuild.

[rodydavis]

@rodydavis Not sure if it's related but this also doesn't work as expected. It's going to be a lot of work to find builders and add Watch in them.

In your example the Watch.builder callback is called and returns a LayoutBuilder widget with no signals read. This is because LayoutBuilder does not run until after page layout and then runs the callback which reads the signal. That is out of the scope of the Watch widget.

When you call .watch(context), it will attach to the actual element used and will rebuild on changes because .value always with the correct context.