Updating Pomodoro Timer Value Doesn't Trigger Alarm Sound in Flutter Riverpod

I am currently working on a Pomodoro timer app using Flutter and Riverpod for state management. I have encountered a problem when I tried to update the default timer value from the settings page.

Here is my current functionality:

I have a Pomodoro timer with a default value of 3. An alarm sound is set to play when the timer ends.
When the user updates the timer value, the updated timer works but the alarm sound doesn't play once the timer ends.
My initial Pomodoro timer state provider is declared as follows: final pomodoroTimerProvider = StateProvider<int>((ref) => 3);

I believe the problem arises from this line, as it seems the alarm sound is conditionally played only when the timer value is 3.

Here is what I want to achieve:

The user should be able to update the timer value.
The updated timer should trigger the alarm sound when it ends, just like the default timer.
The user should also be able to select an alarm sound from a set of options.
Here is the relevant part of my code:

// timer_provider.dart

import 'dart:async';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:just_audio/just_audio.dart';
import 'package:pomoworkojunio2023/domain/entities/sound.dart';

final pomodoroTimerProvider = StateProvider<int>((ref) => 3);
// ... Rest of the code

class TimerNotifier extends StateNotifier<int> {
  // ...

  Future<void> playSound() async {
    if (!_isDisposed) {
      final selectedSound = ref.watch(selectedSoundProvider.notifier).state;
      if (_audioPlayer.processingState != ProcessingState.idle) {
        await _audioPlayer.stop();
      }
      await _audioPlayer.setAsset(selectedSound.path);
      await _audioPlayer.load();
      _audioPlayer.play();
    }
  }
  
  void updateDuration(int newDuration) {
    // ...
  }
}

// settings_page.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../domain/entities/timer_provider.dart';

class SettingsPage extends ConsumerWidget {
  // ...

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      // ...
      body: ListView(
        // ...
        children: <Widget>[
          // ...
          ElevatedButton(
            onPressed: () {
              // ...
              ref.read(timerNotifierProvider.notifier).updateDuration(0);
            },
            child: const Text('Save'),
          )
        ],
      ),
    );
  }
}

class TimerSettingState extends ConsumerStatefulWidget {
  // ...
}

class _TimerSettingStateState extends ConsumerState<TimerSettingState> {
  // ...
}

How can I modify my code so that the alarm sound plays for updated timer values as well? Any step-by-step guide would be much appreciated!

Note: I am using Riverpod v2.3.6 and just_audio v0.9.34. For more information on these packages, please refer to the Riverpod documentation and the just_audio package on pub.dev.

I have also uploaded the full code snippet on GitHub for reference:
https://github.com/codemotozu/stack-overflow-question-riverpod

I greatly appreciate any guidance or suggestions you could provide to help me resolve this issue. Thank you very much for your time and expertise. I'm looking forward to your responses.

Your mistake is probably that you are using ref.watch in callbacks. Just use ref.read:

Future<void> playSound() async {
    if (!_isDisposed) { //     ⬇here⬇
      final selectedSound = ref.read(selectedSoundProvider.notifier).state;
      if (_audioPlayer.processingState != ProcessingState.idle) {
        await _audioPlayer.stop();
      }
      await _audioPlayer.setAsset(selectedSound.path);
      await _audioPlayer.load();
      _audioPlayer.play();
    }
  }