Flutter中EasyLoading与ResponsiveWrapper整合问题求助

看起来你在嵌套两个builder组件时犯了语法和逻辑上的错误——MaterialApp的builder属性需要接收一个(BuildContext context, Widget? child) => Widget类型的函数，而你当前的写法不符合这个要求，导致二者无法正常协同工作。

下面是修正后的完整代码，我调整了两个组件的嵌套顺序，确保EasyLoading能正确覆盖在ResponsiveWrapper处理后的页面之上：

Widget build(BuildContext context) {
  return ScreenUtilInit(
    designSize: const Size(360, 690),
    minTextAdapt: true,
    splitScreenMode: true,
    builder: (context, child) {
      return MaterialApp(
        initialRoute: '/',
        // 正确的builder嵌套逻辑
        builder: (context, child) {
          // 先让ResponsiveWrapper处理页面的响应式布局
          final responsivePage = ResponsiveWrapper.builder(child!,
              defaultScale: true,
              breakpoints: [
                ResponsiveBreakpoint.resize(480, name: MOBILE),
                ResponsiveBreakpoint.autoScale(800, name: TABLET),
                ResponsiveBreakpoint.resize(1000, name: DESKTOP),
              ],
              background: Container(color: Color(0xFFF5F5F5)));
          // 再用EasyLoading.init包裹处理后的页面，确保弹窗能显示在最上层
          return EasyLoading.init(context, responsivePage);
        },
        debugShowCheckedModeBanner: false,
        routes: <String, WidgetBuilder>{
          '/': (BuildContext context) => MainPage(),
          '/CusSearchAtcp': (BuildContext context) => const CusSearchAtcp(),
        },
      );
    });
}

关键细节说明： #

• MaterialApp的builder函数会传入路由页面作为默认child，我们需要先把这个child交给ResponsiveWrapper完成响应式适配，得到适配不同屏幕尺寸的widget。
• 再将适配后的widget传给EasyLoading.init，这样EasyLoading的弹窗就能始终处于页面层级的最上层，不会被ResponsiveWrapper的布局容器遮挡。
• 代码中使用child!是因为MaterialApp在正常路由场景下不会传入null的child，符合空安全要求。

这样调整后，你应该就能同时正常使用ResponsiveWrapper的响应式布局能力和EasyLoading的全局弹窗功能了。

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