如何实现Flutter应用UI对不同屏幕尺寸的响应式适配

1. 优先确认包的初始化顺序与基础配置 #

• 如果两个包同时使用，必须先初始化flutter_screenutil，再初始化Sizer，避免全局尺寸基准被覆盖
  正确初始化代码示例（main.dart中）：

  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    // 先初始化screenUtil，以设计稿尺寸为基准
    await ScreenUtil.ensureScreenSize();
    runApp(const MyApp());
  }
  
  // 根组件处配置两个包的外层包裹
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return ScreenUtilInit(
        designSize: const Size(375, 812), // 替换为你的实际设计稿尺寸
        minTextAdapt: true,
        splitScreenMode: true,
        builder: (context, child) {
          return Sizer(
            builder: (context, orientation, deviceType) {
              return MaterialApp(
                home: const HomePage(),
              );
            },
          );
        },
      );
    }
  }
  

• 禁止两个包的尺寸单位混用：不要同一组件里宽度用Sizer的.w、高度用screenUtil的.h，会导致比例错乱，固定选一套单位体系全项目统一使用即可。

2. 常见适配异常的针对性修复 #

• 文字大小不符合预期
  • 关闭系统字体缩放对应用的影响，在MaterialApp中配置：

    MaterialApp(
      builder: (context, child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
          child: child!,
        );
      },
    )
    

  • 动态尺寸的文字不要写死像素值，统一用.sp单位，比如fontSize: 14.sp
• 横竖屏切换后布局错乱
  • 开启两个包的横竖屏适配配置：screenUtil设置allowFontScaling: false，Sizer的builder参数中监听orientation值，针对横竖屏写差异化布局即可
• 平板/折叠屏适配失效
  • 配置deviceType判断逻辑，针对不同设备类型设置差异化尺寸：

    if (DeviceType.tablet == SizerUtil.deviceType) {
      // 平板端适配逻辑
      padding = EdgeInsets.all(20.w);
    } else {
      // 手机端适配逻辑
      padding = EdgeInsets.all(12.w);
    }
    

3. 适配效果验证注意事项 #

• 用不同分辨率的模拟器/真机分别验证：常见测试尺寸包括320宽的小屏手机、375宽的主流手机、414宽的大屏手机、768宽的平板
• 不要用Chrome的调试预览验证，因为浏览器的窗口比例和手机系统的尺寸计算逻辑有差异，以真机运行效果为准

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