flutter如何实现屏幕适配

在Flutter中如何实现不同尺寸屏幕的适配？目前遇到在大屏和小屏设备上UI显示不一致的问题，布局会出现错乱或留白。想了解有哪些常用的适配方案，比如MediaQuery、ScreenUtil插件，或者通过百分比布局等方式。最好能给出具体的代码实现示例，以及不同方案的优缺点比较。

2 回复

Flutter屏幕适配常用方法：

  1. 使用MediaQuery获取屏幕尺寸
  2. 使用LayoutBuilder响应式布局
  3. 使用FractionallySizedBox按比例布局
  4. 使用flutter_screenutil等第三方库
  5. 通过OrientationBuilder适配横竖屏

建议根据项目需求选择合适方案，推荐flutter_screenutil库简化适配工作。

更多关于flutter如何实现屏幕适配的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现屏幕适配，核心是通过媒体查询和比例缩放来适配不同尺寸和分辨率的设备。以下是常用方法：

1. 使用 MediaQuery 获取屏幕信息

通过 MediaQuery.of(context) 获取屏幕尺寸、像素密度等数据，动态调整布局：

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
double pixelRatio = MediaQuery.of(context).devicePixelRatio;

// 示例：按屏幕宽度比例设置字体大小
Text('适配文本', style: TextStyle(fontSize: screenWidth * 0.05));

2. 使用 LayoutBuilder 响应式布局

在容器尺寸变化时自动调整子组件：

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return _buildTabletLayout(); // 平板布局
    } else {
      return _buildPhoneLayout(); // 手机布局
    }
  },
)

3. 使用 flutter_screenutil 插件（推荐）

步骤：

  1. 添加依赖：flutter_screenutil: ^5.9.0
  2. 初始化并设置设计稿尺寸（默认 360x690）：
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690), // 设计稿尺寸
      builder: (_, child) => MaterialApp(
        home: child,
      ),
      child: const HomePage(),
    );
  }
}
  1. 使用适配单位：
Container(
  width: 100.w,  // 相当于屏幕宽度的 100/360
  height: 50.h,  // 相当于屏幕高度的 50/690
  child: Text('文本', style: TextStyle(fontSize: 16.sp)),
)

4. 横竖屏适配

通过 OrientationBuilder 区分横竖屏：

OrientationBuilder(
  builder: (context, orientation) {
    return orientation == Orientation.portrait
        ? _buildPortrait()
        : _buildLandscape();
  },
)

最佳实践建议：

  • 优先使用百分比（如 FractionallySizedBox）或 Expanded 弹性布局
  • 关键尺寸使用适配插件（如 flutter_screenutil）
  • 图片资源提供多分辨率（1x, 2x, 3x）
  • 测试多种设备，利用模拟器验证效果

通过组合这些方法，可以有效实现 Flutter 应用的屏幕适配。

回到顶部