如何解决flutter_screenutil与Monarch配合使用时的初始化报错问题？

问题根源 #

Monarch的独立预览环境不会自动继承Flutter项目中flutter_screenutil的全局初始化配置，导致_minTextApdapt等核心字段未初始化，进而使14.sp、ScreenUtil().setSp(14)无法正常工作。

具体修复方案 #

1. 在Story入口包裹ScreenUtilInit

直接在你定义的story widget外层添加ScreenUtilInit，确保所有依赖flutter_screenutil的组件都在其上下文范围内：

Widget paid() => ScreenUtilInit(
      // 替换为你的设计稿基准尺寸
      designSize: const Size(375, 812),
      minTextAdapt: true,
      builder: (context, child) => HistoryItem(Paid(
            orderDate: '2023-11-10',
            subscriptionType: 1,
            orderId: '3YMU5SCEP57H',
            orderPrice: 10000,
            orderProduct: 'Vitamin C')),
    );

2. 全局初始化（适用于多个story）

如果你的项目有多个story需要使用flutter_screenutil，可以在Monarch的全局入口文件（如monarch_stories.dart）中统一初始化：

void main() {
  // 确保获取屏幕尺寸
  ScreenUtil.ensureScreenSize();
  runApp(ScreenUtilInit(
    designSize: const Size(375, 812),
    minTextAdapt: true,
    builder: (context, child) => const MaterialApp(
      home: Scaffold(body: YourStoryContainer()),
    ),
  ));
}

3. 组件内手动初始化（应急方案）

如果上述方法不适用，可在依赖flutter_screenutil的组件内部手动初始化：

class Paid extends StatefulWidget {
  // ... 你的字段定义

  @override
  State<Paid> createState() => _PaidState();
}

class _PaidState extends State<Paid> {
  @override
  void initState() {
    super.initState();
    // 初始化ScreenUtil
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ScreenUtil.init(context, designSize: const Size(375, 812), minTextAdapt: true);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      widget.orderProduct,
      style: TextStyle(fontSize: ScreenUtil().setSp(14)),
    );
  }
}

关键注意事项 #

• 必须保证所有使用sp扩展或ScreenUtil方法的组件，都处于ScreenUtilInit的上下文子树中。
• designSize要和你项目中使用的基准设计尺寸保持一致，避免适配比例出错。

内容的提问来源于stack exchange，提问作者c-an