如何让已有的Flutter项目实现响应式适配？

一、低成本快速引入适配工具 #

• 用flutter_screenutil库实现自动尺寸缩放，无需大面积修改原有代码：
  1. 初始化（在main函数中绑定设计稿基准尺寸，比如常用的375*667）：

     void main() {
       runApp(const MyApp());
     }
     
     class MyApp extends StatelessWidget {
       const MyApp({super.key});
     
       @override
       Widget build(BuildContext context) {
         return ScreenUtilInit(
           designSize: const Size(375, 667),
           minTextAdapt: true,
           builder: (context, child) => MaterialApp(
             home: child,
           ),
           child: const HomePage(),
         );
       }
     }
     

  2. 替换固定尺寸：把代码里的width: 100改成width: 100.w，fontSize: 16改成fontSize: 16.sp，padding: EdgeInsets.all(20)改成padding: EdgeInsets.all(20.w)，自动适配不同屏幕。

二、修复布局偏移与溢出问题 #

• 替换固定宽度的容器，用Expanded/Flexible分配空间：
  原错误写法：

  Row(
    children: [
      Container(width: 200, child: Text("超长文本内容")),
      Container(width: 100, child: Icon(Icons.edit)),
    ],
  )
  

  改成自适应布局：

  Row(
    children: [
      Expanded(flex: 2, child: Text("超长文本内容")),
      Expanded(flex: 1, child: Icon(Icons.edit)),
    ],
  )
  

• 给溢出页面套SingleChildScrollView，避免报错：

  SingleChildScrollView(
    child: Column(
      children: [
        // 原有页面内容
      ],
    ),
  )
  

• 用LayoutBuilder区分大屏/小屏布局：

  LayoutBuilder(
    builder: (context, constraints) {
      if (constraints.maxWidth > 600) {
        // 大屏下用横向布局
        return Row(children: [...]);
      } else {
        // 小屏保留原有纵向布局
        return Column(children: [...]);
      }
    },
  )
  

三、文本与图片的适配细节 #

• 文本处理：用FittedBox防止长文本溢出，配合sp单位适配字号：

  FittedBox(
    fit: BoxFit.scaleDown,
    child: Text("可能超出屏幕的长文本内容", style: TextStyle(fontSize: 16.sp)),
  )
  

• 图片适配：用BoxFit控制缩放，或按屏幕比例设置宽度：

  Image.asset(
    "assets/banner.png",
    width: MediaQuery.of(context).size.width * 0.85,
    fit: BoxFit.contain,
  )
  

四、已有项目改造建议 #

• 优先修复问题页面：先处理大屏下偏移、溢出严重的页面，分批次改造，降低风险。
• 自定义适配工具类（不想用第三方库时）：

  class ScreenAdapt {
    static double get screenWidth => MediaQuery.of(GlobalKey<NavigatorState>().currentContext!).size.width;
    static double get screenHeight => MediaQuery.of(GlobalKey<NavigatorState>().currentContext!).size.height;
    static double setWidth(double designWidth) => designWidth / 375 * screenWidth;
    static double setHeight(double designHeight) => designHeight / 667 * screenHeight;
    static double setFontSize(double designSize) => designSize / 375 * screenWidth;
  }
  

  然后用ScreenAdapt.setWidth(100)替代固定数值。
• 多维度测试：用模拟器测试1080p、2K大屏及平板尺寸，验证适配效果。

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