Flutter 中如何使用 BlocBuilder 刷新 Dialog答案

【问题标题】：How to use BlocBuilder to refresh a Dialog in FlutterFlutter 中如何使用 BlocBuilder 刷新 Dialog
【发布时间】：2022-01-25 18:34:09
【问题描述】：

我有一个对话框，我将它包装在一个 blocbuilder 中以根据状态类型对其进行更新，但该对话框只是第一次构建，并且在状态更改后它不会重新构建。

showDialog(
  context: context,
  builder: (_) {
  BlocBuilder<ExampleCubit, ExampleState>(
      bloc: cubit,
      builder: (context, state) {
        return CustomDialog(
          title:"title",
          onSave: (File file) {
            cubit.uploadImage(file);
          },
          progress: (state is ExtendedExampleState)? state.progress:0,
          onDelete: () {},
          onCancel: () {
             cubit.cancelUploading();
          },
        );
      },
    );

注意：使用 Bloc 模式而不是 StateFulBuilder 很重要。

【问题讨论】：

请分享您的 CustomDialog 代码。
请分享Example Cubit和Example State和Custom Dialog。当前信息还不够
问题是BlocBuilder的builder在show dialog的builder中不记得了，我的肘和状态都没有关系。

标签： flutter bloc cubit flutter-dialog flutter-cubit

【解决方案1】：

您可以在Dialog 中使用BlocBuilder，以便在每次发生更改时重新构建它。为此，您还需要使用BlocProvider.value 传递当前的cubit(bloc)。

  // Get the cubit(bloc) instance
  final exampleCubit = context.read<ExampleCubit>();

  showDialog(
    context: context,
    builder: (BuildContext context) {
      // Provide the existing cubit(bloc) instance to the new route (the dialog)
      return BlocProvider<ExampleCubit>.value(
        value: exampleCubit,
        child: CustomDialog(
            //... your implementation
        ),
      );
    },
  );

现在，请确保您在CustomDialog 中使用BlocBuilder，如下所示：

class CustomDialog extends StatelessWidget {

  const CustomDialog({
    Key? key,  
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<HomeCubit, HomeState>(
      builder: (context, state) {
        // rebuild widget...
      }
    )
  }

通过此设置，对话框将使用 bloc 进行更新。

【讨论】：