等待未来解决时,FlutterRiverpod显示循环进度指示器

qij5mzcb  于 2023-01-27  发布在  Flutter
关注(0)|答案(2)|浏览(154)

我想显示CircularProgressIndicator,同时等待将来使用flutter_riverpod解决,这是我的代码片段。但它没有显示,我正在使用ConsumerStatefulWidget,这是正确的方法吗?

ElevatedButton(
                    onPressed: () {
                      rejectResponse = ref
                          .read(notificationRepositoryProvider)
                          .approveDocument(1);
                      Navigator.of(context).pop();
                      setState(() {});
                    },
                    child: FutureBuilder(
                        future: rejectResponse,
                        builder: (context, snapshot) {
                          if (snapshot.connectionState ==
                              ConnectionState.done) {
                            if (snapshot.hasData) {
                              return Text('Yes');
                            } else if (snapshot.hasError) {
                              return Text('Error');
                            }
                          } else if (snapshot.connectionState ==
                              ConnectionState.waiting) {
                            return CircularProgressIndicator();
                          }
                          return Text('Yes');
                        }),
                  ),
ozxc1zmp

ozxc1zmp1#

在Riverpod中执行此操作的首选方法是使用FutureProviderAsyncValue

final notificationRepositoryProvider = FutureProvider<bool?>((ref) async {
  Future<bool> approveDocument() => Future.delayed(Duration(seconds: 2), () => Future.value(Random().nextBool()));

  return approveDocument();
});

class HomeView extends ConsumerStatefulWidget {
  const HomeView({Key? key}) : super(key: key);

  @override
  HomeViewState createState() => HomeViewState();
}

class HomeViewState extends ConsumerState<HomeView> {
  @override
  Widget build(BuildContext context) {
    AsyncValue<bool?> rejectResponse = ref.watch(notificationRepositoryProvider);
    return ElevatedButton(
        onPressed: () {
         ref.refresh(notificationRepositoryProvider.future);
        },
        child: rejectResponse.when(
          loading: () => const CircularProgressIndicator(
            color: Colors.white,
          ),
          skipLoadingOnRefresh: false,
          error: (err, stack) => Text('Error'),
          data: (data) => Text('Yes: $data'),
        ));
  }
}

请注意,在初始加载之后,FutureProvider将为return the previous value but will set AsyncValue.isRefreshing to true。为了避免这种情况并始终在刷新时显示加载器,可以将skipLoadingOnRefresh设置为false。

4ktjp1zp

4ktjp1zp2#

你可以使用ConnectionState,但我认为它也可以处于none状态,所以你可以检查它是否完成,如果没有,你可能应该显示加载指示器。

builder: (context, snapshot) {
   if (snapshot.connectionState != ConnectionState.done) {
      return CircularProgressIndicator();
   } 
   else 
      return Text('Yes');
   } 
}

我通常使用hasData属性来代替,这样可以减少必须处理的状态数,并且可以安全地假设snapshot.data不是null

// strongly type the builder so snapshot.data is typed as well.
FutureBuilder<MyType>( 
    future: myFuture
    builder: (context, snapshot) {
       if (!snapshot.hasData) return Loading();

       final data = snapshot.data!; // '!' is safe since hasData is true
       return DisplayData(data);
    }
)

相关问题