Flutter - Bloc 8 如何将视频上传到 Firebase答案

【问题标题】：Flutter - Bloc 8 how to upload video to FirebaseFlutter - Bloc 8 如何将视频上传到 Firebase
【发布时间】：2022-01-17 23:58:10
【问题描述】：

如何使用 bloc 来更新我的用户界面。

我的 recipeRepository 中有这个

  Future<UploadTask> uploadVideo(File file) async {
    final fileName = basename(file.path);
    final destination = 'videos/$fileName';
    final ref = storage.ref(destination);
    final task = ref.putFile(file);
    return task;
  }

在我的食谱块中，我有这个 addRecipe，我想查看上传进度并相应地更新 UI。

  Future<void> addRecipe(
    AddRecipe event,
    Emitter<RecipeState> emit,
  ) async {
    try {
      final uploadTask = await _recipeRepository.uploadVideo(event.file);

      uploadTask.snapshotEvents.listen((event) {
        final progress = event.bytesTransferred / event.totalBytes;
        emit(UploadingVideo(progress: progress));
      });
    } catch (e) {
      emit(_Error(e.toString()));
    }
  }

这是我正在观察状态变化的地方

 final state = context.watch<RecipeBloc>().state;

   return state.maybeWhen(
      uploadingVideo: (progress) {
        return _buildVideoUploading(progress);
      },
      orElse: () => _buildForm(context),
    );

  Stack _buildVideoUploading(double progress) {
    return Stack(
      alignment: Alignment.center,
      children: [
        SizedBox(
          width: 200,
          height: 200,
          child: CircularProgressIndicator(
            value: progress,
            color: Colors.green,
          ),
        ),
        Text(
          (progress * 100).toInt().toString() + '%',
          style: const TextStyle(fontSize: 40),
        ),
      ],
    );
  }

问题是当发出代码在 RecipeBloc 中被调用时，我收到以下错误。

[VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: 'package:bloc/src/emitter.dart': Failed assertion: line 114 pos 7: '!_isCompleted':
package:bloc/src/emitter.dart:1
emit was called after an event handler completed normally.
This is usually due to an unawaited future in an event handler.
Please make sure to await all asynchronous operations with event handlers
and use emit.isDone after asynchronous operations before calling emit() to
ensure the event handler has not completed.
  **BAD**
  on<Event>((event, emit) {
    future.whenComplete(() => emit(...));
  });
  **GOOD**
  on<Event>((event, emit) async {
    await future.whenComplete(() => emit(...));
  });

【问题讨论】：

标签： flutter bloc flutter-bloc

【解决方案1】：

您的事件在文件有机会上传之前就结束了，您需要等待直到完整的流释放其值。

可能有一个 API 要知道，我不知道 API，但如果没有，您可以随时等待流本身：

final uploadTask = await _recipeRepository.uploadVideo(event.file);
try {
  uploadTask.snapshotEvents.listen((event) {
    final progress = event.bytesTransferred / event.totalBytes;
    emit(UploadingVideo(progress: progress));
  });
  await uploadTask.snapshotEvents.last; // so that the event doesn't end before the stream
}

【讨论】：