Flutter Riverpod，如何設置最小加載狀態時間？

Question

使用 Flutter 和 Riverpod 構建應用程序，使用了很多：

ref.watch(someProvider).when(data: (someData){
   // render layout with data
}, error: (err, stack) { 
  // do stuff with error
}, loading: (){
  return LoadingScreen(); <----
})

問題在於，在大多數情況下，加載屏幕只會呈現一瞬間，導致應用感覺有點“跳動”的糟糕體驗。 我希望能夠為加載狀態設置至少 2 秒的時間，是否可以強制小部件在最短時間內保持渲染狀態？

Answer 1

我有2個建議給你：

選項 A - 你可以在你的提供者中放置 2 秒的延遲，介於加載和下一個狀態之間。 這樣你就可以讓加載屏幕至少顯示 2 秒。

選項 B - 您還可以制作一個 loadingScreen 作為覆蓋小部件，它會在 2 秒后自行消失。 這樣你就可以讓加載屏幕顯示正好 2 秒。

我相信任何一種方式都適合你的情況，因為你說它閃爍，我假設在狀態之間沒有完成繁重/長時間的任務。 如果您確實需要繁重/長時間的任務，選項 A 保證任務在加載屏幕消失之前完成。

Answer 2

您可以創建Stopwatch來跟蹤（近似）操作持續時間。 這個例子會給你一些想法。

final someProvider = FutureProvider<int>((ref) async {
  final operationDuration = Duration(seconds: 1); //random, you can give it random to test
  final stopwatch = Stopwatch()..start();
  final data = await Future.delayed(operationDuration);

  final minOperationTime = const Duration(seconds: 2);
  final extraWaiting = minOperationTime.inMilliseconds - stopwatch.elapsed.inMilliseconds;
  if (stopwatch.elapsed.inSeconds < 2) {
    await Future.delayed(minOperationTime - stopwatch.elapsed);
  }
  return extraWaiting;
});

和小部件

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ref.watch(someProvider).when(data: (someData) {
      return Text("got data  ${someData}");
    }, error: (err, stack) {
      return Text("Err");
    }, loading: () {
      return CircularProgressIndicator();
    });
  }
}