Flutter中initState调用MenuProvider无法加载数据的问题及替代方案

一、现有代码的问题点 #

1. 初始化请求未等待完成
   getInit方法声明为async，但内部调用的各类Provider异步方法（如getBanner、fetchCategory）未添加await，导致getInit会立即执行完毕，后续的autoLogin会在这些初始化请求还未完成时就执行，可能引发数据加载时序冲突。

2. 页面跳转时机的潜在风险
   虽然autoLogin中对fetchMenu使用了await，但如果MenuProvider的fetchMenu方法内部未正确调用notifyListeners()更新状态，或者网络请求失败未抛出异常，会导致目标页面（MainPage/MainPage2）渲染时无法获取到最新菜单数据。另外，当前代码中跳转后调用的setState()完全多余，可直接删除。

3. 重复调用的潜在冲突
   代码中getInit里注释了MenuProvider的fetchMenu调用，后续若放开会与autoLogin中的调用重复，可能引发重复网络请求或状态覆盖。

二、代码修复建议 #

1. 修正getInit方法，等待所有异步请求完成 #

Future<void> getInit() async {
  if (!mounted) return;
  await context.read<BannerProvider>().getBanner();
  await context.read<CategoryProvider>().fetchCategory();
  await context.read<OutletProvider>().fetchOutlet();
  await context.read<UpdateAppWarningProvider>().fetchUpdateWarning();
}

2. 确保MenuProvider的fetchMenu正确更新状态 #

检查MenuProvider的fetchMenu方法，必须在数据加载完成后调用notifyListeners()通知UI更新：

class MenuProvider extends ChangeNotifier {
  List<dynamic> _menuList = [];
  List<dynamic> get menuList => _menuList;

  Future<void> fetchMenu({required String categories}) async {
    try {
      // 替换为实际的网络请求/数据获取逻辑
      final response = await yourApiService.getMenu(categories: categories);
      _menuList = response.data;
      notifyListeners(); // 关键：通知UI状态更新
    } catch (e) {
      print('菜单加载失败: $e');
      // 可添加错误状态管理，便于UI展示错误提示
    }
  }
}

3. 清理autoLogin中的冗余代码 #

Future<void> autoLogin() async {
  const FlutterSecureStorage storage = FlutterSecureStorage();
  String? accessToken;
  try {
    accessToken = await storage.read(key: 'accessToken');
  } on PlatformException catch (e) {
    if (kDebugMode) {
      print('读取AccessToken失败: $e');
    }
  }

  await Provider.of<MenuProvider>(context, listen: false).fetchMenu(categories: '');
  
  if (accessToken != null) {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => const MainPage(currentIndex: 0)),
    );
  } else {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => const MainPage2()),
    );
  }
}

三、其他实现方式 #

1. 使用FutureBuilder统一管理初始化流程 #

将所有初始化逻辑放到FutureBuilder中，等待所有请求完成后再跳转页面，确保数据加载完毕再进入主页面：

@override
Widget build(BuildContext context) {
  return FutureBuilder(
    future: _completeInitialization(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        // 显示闪屏加载动画
        return const Scaffold(body: Center(child: CircularProgressIndicator()));
      } else if (snapshot.hasError) {
        // 显示错误页面，提供重试选项
        return Scaffold(
          body: Center(
            child: ElevatedButton(
              onPressed: () => setState(() {}),
              child: const Text('重试'),
            ),
          ),
        );
      } else {
        // 根据登录状态跳转对应页面
        return _buildTargetPage();
      }
    },
  );
}

Future<void> _completeInitialization() async {
  await getAndSaveDeviceInformation();
  await printIps();
  await checkLocation();
  await getInit();
  await _prepareLoginState();
}

Future<void> _prepareLoginState() async {
  const FlutterSecureStorage storage = FlutterSecureStorage();
  String? accessToken = await storage.read(key: 'accessToken');
  await Provider.of<MenuProvider>(context, listen: false).fetchMenu(categories: '');
  // 可将登录状态保存到全局Provider，避免重复读取Storage
}

Widget _buildTargetPage() {
  return FutureBuilder<String?>(
    future: const FlutterSecureStorage().read(key: 'accessToken'),
    builder: (context, snapshot) {
      return snapshot.data != null 
          ? const MainPage(currentIndex: 0) 
          : const MainPage2();
    },
  );
}

2. 在Provider初始化时触发数据加载 #

在创建MenuProvider时直接调用初始化方法，结合FutureBuilder等待加载完成：

// 在顶层Provider配置中
ChangeNotifierProvider(
  create: (context) {
    final provider = MenuProvider();
    provider.fetchMenu(categories: '');
    return provider;
  },
  child: YourApp(),
);

// 闪屏页中监听加载状态
@override
Widget build(BuildContext context) {
  final menuProvider = context.watch<MenuProvider>();
  if (menuProvider.menuList.isEmpty) {
    return const SplashLoadingWidget();
  } else {
    // 执行后续初始化和跳转
    return FutureBuilder(
      future: _otherInitializations(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return _buildTargetPage();
        }
        return const SplashLoadingWidget();
      },
    );
  }
}

3. 使用AppLifecycleListener监听应用启动 #

在应用入口监听AppLifecycleState.resumed状态，执行全局初始化逻辑（适合无需依赖页面上下文的初始化）：

void main() {
  runApp(const MyApp());
  AppLifecycleListener(
    onStateChange: (state) {
      if (state == AppLifecycleState.resumed) {
        // 执行全局初始化逻辑，如设备信息保存、基础数据预加载
        _globalInitialization();
      }
    },
  );
}

Future<void> _globalInitialization() async {
  // 此处可执行无需页面上下文的初始化操作
  await getAndSaveDeviceInformation();
  await printIps();
}

内容的提问来源于stack exchange，提问作者Avief Akbarsyah Putra