0

I've got a screen that has a CupertinoSliverRefreshControl controlling the pull-to-refresh capability that looks something like this:

CupertinoSliverRefreshControl(
  onRefresh: () async {
    _bloc.add(MyBlocEvent.reload());
  },
);

Because CupertinoSliverRefreshControl only shows the spinner for as long as the onRefresh block takes to run (which is basically instantaneous in this case), the spinner disappears immediately... whereas the natural iOS UX is that it stays visible until the reload has completed.

I've tried adding an await Future.delayed() after I add the event to the bloc - which sort of works in that it will show the spinner for that duration... however, that duration is not actually related to how long the bloc takes to reload the content.

I've even tried waiting for, say, 20 seconds and hoping that the bloc reload would blow away the spinner - which didn't work initially (presumably because CupertinoSliverRefreshControl is stateful)... if I add a UniqueKey to the refresh control then when the bloc finishes the spinner does disappear, but it is a jarring transition because a whole new refresh control is getting built (instead of nicely easing back into place)

I'm curious how folk uses this control in the context of a bloc. Thanks a lot.

Gwhyyy
  • 7,554
  • 3
  • 8
  • 35
Craig Edwards
  • 2,118
  • 1
  • 18
  • 23

1 Answers1

0

I haven't worked much with bloc implementations in which I had to add events to it with add() function, but I usually use Cubit and simply call functions from it. So if you could refactor your Bloc implementation to Cubit, or regular Bloc but in which you can call functions from it instead of adding events with add function you can easily do something like:

class MyCubit extends Cubit<String> {
  MyCubit(String initialOption) : super(initialOption);

  Future<void> reload() async {
    final newValue = await Future.delayed(const Duration(seconds: 5)); //Here is your reloading logic
    emit(newValue);
  }
}

This way if you'll call from Widget: await context.read<MyCubit>().reload(); in the onRefresh function, loader will disappear right after you've reloaded data and emitted new one.

I hope it helps.

Karzel
  • 928
  • 9
  • 24