Flutter_ScreenUtil从Web切换到移动端失效问题求助

核心错误点 #

1. 重复嵌套ScreenUtilInit：你在每个页面的build里额外套了一层ScreenUtilInit，这会覆盖根节点的适配配置，导致移动端的设备信息被错误重置，尺寸计算逻辑混乱。
2. 根节点初始化方式有误：直接用child传递MaterialApp，可能导致ScreenUtil无法正确获取设备上下文信息，适配逻辑无法正常生效。

正确实现步骤 #

1. 移除所有页面中的ScreenUtilInit

删掉每个页面build方法里的ScreenUtilInit包裹，只保留main.dart中根节点的一次初始化。

2. 修改main.dart的根初始化代码

使用builder参数替代child，确保ScreenUtil能正确绑定设备上下文：

@override
Widget build(BuildContext context) {
  return ScreenUtilInit(
    designSize: const Size(360, 690),
    // 通过builder传递context，让适配逻辑正确获取设备信息
    builder: (context, child) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: const LoginScreen(),
        navigatorKey: rootNavigatorKey,
      );
    },
  );
}

3. 页面中正常使用适配属性

在任意子页面中直接使用.sp、.w、.h等适配单位即可，无需额外包裹：

style: TextStyle(
  fontSize: 12.sp,
  fontWeight: FontWeight.bold,
),

额外优化：保证Web与移动端显示一致 #

如果需要Web端和移动端的视觉效果完全对齐，可以添加以下配置：

ScreenUtilInit(
  designSize: const Size(360, 690),
  // 强制使用继承的媒体查询，避免Web窗口尺寸干扰适配逻辑
  useInheritedMediaQuery: true,
  builder: (context, child) {
    ScreenUtil.init(context, designSize: const Size(360, 690));
    return MaterialApp(...);
  },
)

无效原因说明 #

• 重复初始化ScreenUtilInit会重置适配参数，覆盖根节点的设计尺寸，导致移动端用错误的设备信息计算元素尺寸。
• 直接用child传递MaterialApp时，ScreenUtil无法捕获真实的设备MediaQuery数据，适配计算用的是默认值而非设备实际参数。

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