Flutter中main函数使用async/await后运行报错求助

问题场景 #

开发Todo应用时，为使用await将main函数改为Future<void>类型，执行flutter run后出现报错，代码与教程一致但无法定位原因。

报错信息 #

The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:53458/Rh6K6wUiuNY=
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
packages/flutter/src/services/platform_channel.dart 332:7                    _invokeMethod
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 163:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 861:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 890:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 666:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 736:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

涉事代码片段 #

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_first_project/home.dart';
import 'package:flutter_first_project/todo_bloc/todo_bloc.dart';
import 'package:hydrated_bloc/hydrated_bloc.dart';
import 'package:path_provider/path_provider.dart';

Future<void> main() async {
  // Ensures that all the necessary Flutter bindings are initialized
  WidgetsFlutterBinding.ensureInitialized();

  // Set up HydratedBloc storage, handling any potential errors gracefully
  HydratedBloc.storage = await HydratedStorage.build(
    storageDirectory: await getTemporaryDirectory(),
  );
}

排查与解决方案 #

从报错栈和代码分析，问题核心是Web平台不支持path_provider的原生API调用：

• getTemporaryDirectory()依赖移动端原生平台通道，Web环境没有对应实现，直接调用会触发平台通道调用失败。
• 教程大概率针对移动端编写，未考虑Web平台适配。

解决步骤：

1. 区分平台配置HydratedBloc存储
   HydratedBloc为Web平台提供了专属的webStorage实现，无需依赖path_provider，修改代码如下：

   import 'dart:ui' show kIsWeb; // 导入kIsWeb判断平台
   // ...其他导入
   
   Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();
   
     // 根据平台选择存储方式
     if (kIsWeb) {
       HydratedBloc.storage = HydratedStorage.webStorage();
     } else {
       HydratedBloc.storage = await HydratedStorage.build(
         storageDirectory: await getTemporaryDirectory(),
       );
     }
   
     // 补充遗漏的runApp调用（必须启动应用）
     runApp(MultiBlocProvider(
       providers: [
         BlocProvider(create: (_) => TodoBloc()),
       ],
       child: const MyApp(),
     ));
   }
   

2. 补充runApp调用
   当前代码片段仅初始化了存储，未启动应用，这会导致运行异常，必须添加runApp代码完成应用启动流程。

3. 检查依赖版本
   确保hydrated_bloc和path_provider的版本与当前Flutter版本兼容，避免版本冲突引发的隐性问题。

内容的提问来源于stack exchange，提问作者Abdelrahim Nabil