Working on settings for my app and allow users to select the primary theme color. I have a riverpod Notifier provider for the color selected and updating it on select. Part of the UI updates (the color selected is highlighted) and have tested with debug messages that the build method is getting called, but the second bubble widget isnt updating its color. Ive tried with a simple stateful widget and setstate and same outcome. Ive tried wrapping the bubble widget in a consumer widget and still no update. Also used a statebuilder when I was trying with just setstate and stateful widget. Not sure why the bubble widget isnt updating.

Here’s the code:

final selectedColorProvider = NotifierProvider<SelectedColor, int>(() {
  return SelectedColor();
});

class SelectedColor extends Notifier<int> {
  @override
  int build() {
    return ref.read(settingsControllerProvider).getPrimaryColor().value;
  }

  void setColor(Color color) {
    state = color.value;
  }
}

class ChatColorsScreen extends ConsumerWidget {
  const ChatColorsScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final settings = ref.watch(settingsControllerProvider);
    Color selectedColor = Color(ref.watch(selectedColorProvider));

    final circleColors = [
      Colors.red,
      Colors.pink,
      Colors.purple,
      Colors.deepPurple,
      Colors.indigo,
      Colors.blue,
      Colors.lightBlue,
      Colors.cyan,
      Colors.teal,
      Colors.green,
      Colors.lightGreen,
      Colors.lime,
      Colors.yellow,
      Colors.amber,
      Colors.orange,
      Colors.deepOrange,
      Colors.brown,
      Colors.grey,
      Colors.blueGrey,
      Colors.black,
      Colors.white,
    ];
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chat Color'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            context.pop();
          },
        ),
      ),
      body: Column(
        children: [
          const SizedBox(height: 20),
          //preview of chat messages
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Bubble(
                color: Colors.grey[200],
                padding:
                    const BubbleEdges.symmetric(horizontal: 20, vertical: 10),
                nip: BubbleNip.no,
                radius: const Radius.circular(20),
                child: Text(
                  context.loc.receiver_preview_text,
                  style: const TextStyle(
                    fontSize: 17,
                    color: Colors.black,
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    context.loc.original,
                    style: const TextStyle(
                      fontSize: 12,
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
            ],
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Bubble(
                color: Color(ref
                    .read(selectedColorProvider)), // Use current selectedColor
                padding: const BubbleEdges.symmetric(
                  horizontal: 20,
                  vertical: 10,
                ),
                nip: BubbleNip.no,
                radius: const Radius.circular(20),
                child: Text(
                  context.loc.sender_preview_text,
                  style: TextStyle(
                    fontSize: 17,
                    color: Theme.of(context).textTheme.bodySmall?.color,
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text(
                    context.loc.original,
                    style: const TextStyle(
                      fontSize: 12,
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
            ],
          ),

          const SizedBox(height: 20),
          //grid of circles to select chat colors
          Expanded(
            child: GridView.count(
              crossAxisCount: 4, // 4 circles per row
              children: circleColors
                  .map((color) => GestureDetector(
                        onTap: () {
                          settings.setPrimaryColor(color);
                          ref
                              .read(selectedColorProvider.notifier)
                              .setColor(color);
                        },
                        child: Container(
                          margin: const EdgeInsets.all(5),
                          child: Stack(
                            children: [
                              if (color.value ==
                                  ref.read(
                                      selectedColorProvider)) // Add white ring for selection
                                const Center(
                                  child: CircleAvatar(
                                    backgroundColor: Colors.white,
                                    radius:
                                        34, // Slightly smaller radius for ring effect
                                  ),
                                ),
                              Center(
                                child: CircleAvatar(
                                  backgroundColor: color,
                                  radius: 30, // Adjust radius as needed
                                ),
                              ),
                            ],
                          ),
                        ),
                      ))
                  .toList(),
            ),
          ),
        ],
      ),
    );
  }
}

EDIT: Ive narrowed it down to the Bubble widget, as Ive tried just a container and that worked.

Not sure what to try next to troubleshoot, thanks