riverpod, my provider's state keeps on loading, instead of actually displaying data

Question

I am making Digital Clock using riverpod 2.0. You can see in the picture, my clock is running fine in terminal. on the emulator the current time is shown as sample (without riverpod, UI dont update). and below that Text(), CircularProgressBar() keeps on loading infinitely. What do i do?

My Provider and clock-logic is:

/*
*       Providers
*/
final clockProvider = StreamProvider((ref) => updateMyClockTime() );


/*
*       Functions
*/
String myClockTime = 'df-1'; //default value
Timer? myTimer;

Stream updateMyClockTime()  async* {
  myTimer =  await Timer.periodic(Duration(seconds: 1), (t) {
    myClockTime =  DateFormat('h:m:s a').format(DateTime.now());
    print(' current time is: $myClockTime');
  });
}

My Scaffold() body is:

xyzWidget.when(
              data: (data) {
                return Center(child: Text(
                  '${data} - ${xyzWidget.value}',
                  style: const TextStyle(fontSize: 50),
                ),);
              },
              error: (error, stackTrace) {
                print('The Error msg is: \n $error')  ;

                return Text(
                  '$error',
                  style: const TextStyle(fontSize: 20),
                );
              },
              loading: () => const Center(
                child: CircularProgressIndicator(),
              ),
            ),

The picture as sample:

Answer 1

Your updateMyClockTime never emits anything.
When using async*, you need to yield values you want to emit

Like:

Stream<String> updateMyClockTime()  async* {
  final myClockTime =  DateFormat('h:m:s a').format(DateTime.now());
  yield ' current time is: $myClockTime';
}