flutter 屏幕适配方案，用于调整屏幕和字体大小的flutter插件，让你的UI在不同尺寸的屏幕上都能显示合理的布局!
- 实现方案：使用插件 flutter_screenutil
- 官方地址：github.com/OpenFlutter…
以下是 flutter_screenutil 插件最常用的基本使用方式，我把它们按实际开发中最常出现的场景列出来（从最基础到稍进阶），方便你快速上手和查阅。
初始化（必须在入口处做一次）
main.dart文件
// flutter 屏幕适配方案
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(360, 690),
minTextAdapt: true, // 开启字体自适应（推荐）
splitScreenMode: true, // 支持分屏/折叠屏
builder: (context, child) {
return MaterialApp(
title: 'Flutter Demo',
home: const MyHomePage(),
);
},
);
}
}
常见移动端设计稿尺寸
iOS 设备
| 设备 | 1x 尺寸 (pt) | 物理分辨率 | 倍率 |
|---|---|---|---|
| iPhone SE (1代) | 320 × 568 | 640 × 1136 | @2x |
| iPhone 6/7/8/SE2/SE3 | 375 × 667 | 750 × 1334 | @2x |
| iPhone 6/7/8 Plus | 414 × 736 | 1242 × 2208 | @3x |
| iPhone X/XS/11 Pro | 375 × 812 | 1125 × 2436 | @3x |
| iPhone XR/11 | 414 × 896 | 828 × 1792 | @2x |
| iPhone XS Max/11 Pro Max | 414 × 896 | 1242 × 2688 | @3x |
| iPhone 12 mini/13 mini | 375 × 812 | 1080 × 2340 | @3x |
| iPhone 12/12 Pro/13/13 Pro/14 | 390 × 844 | 1170 × 2532 | @3x |
| iPhone 12/13/14 Pro Max | 428 × 926 | 1284 × 2778 | @3x |
| iPhone 14 Pro | 393 × 852 | 1179 × 2556 | @3x |
| iPhone 14 Pro Max | 430 × 932 | 1290 × 2796 | @3x |
| iPhone 15/15 Pro | 393 × 852 | 1179 × 2556 | @3x |
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | @3x |
Android 设备
| 设备类型 | 常用尺寸 (dp) | 说明 |
|---|---|---|
| 小屏 | 320 × 480 | 低端机型 |
| 中屏 | 360 × 640 | 主流尺寸 |
| 中屏 | 360 × 720 | 18:9 全面屏 |
| 中屏 | 360 × 780 | 19.5:9 全面屏 |
| 大屏 | 375 × 812 | 与 iOS 统一设计 |
| 大屏 | 411 × 731 | Pixel 系列 |
| 大屏 | 411 × 823 | Pixel 系列全面屏 |
设计师常用基准尺寸
| 尺寸 | 适用场景 | 推荐指数 |
|---|---|---|
| 375 × 667 | iOS 经典尺寸，兼容性最好 | ⭐⭐⭐⭐⭐ |
| 375 × 812 | iOS 刘海屏，目前主流 | ⭐⭐⭐⭐⭐ |
| 360 × 640 | Android 经典尺寸 | ⭐⭐⭐⭐ |
| 390 × 844 | iPhone 12/13/14 尺寸 | ⭐⭐⭐⭐ |
| 750 × 1334 | 375 × 667 的 @2x 版本 | ⭐⭐⭐ |
平板设备
| 设备 | 尺寸 |
|---|---|
| iPad mini | 768 × 1024 |
| iPad | 810 × 1080 |
| iPad Air | 820 × 1180 |
| iPad Pro 11" | 834 × 1194 |
| iPad Pro 12.9" | 1024 × 1366 |
设计建议
| 目标 | 推荐设计尺寸 |
|---|---|
| 只做 iOS | 375 × 812 |
| 只做 Android | 360 × 780 |
| iOS + Android 通用 | 375 × 812 或 375 × 667 |
| 兼顾老设备 | 375 × 667 |
目前最推荐：375 × 812，覆盖面广，主流设备显示效果好。
最常使用的几个后缀（记这几个基本够用）
| 后缀 | 含义 | 典型场景 |
|---|---|---|
| .w | 根据屏幕宽度等比缩放 | 宽度、水平间距、水平 padding |
| .h | 根据屏幕高度等比缩放 | 高度、垂直间距、垂直 padding |
| .sp | 字体大小缩放（会考虑字体设置） | 字体大小 |
| .r | 根据宽度等比缩放（用于圆角） | 圆角 |
掌握以上这些，基本就能覆盖 95% 的日常 UI 适配需求
所有的使用方法请去官方文档查看
示例1：
// 宽度（类似 rpx）
Container(
width: 300.w, // 设计稿 300 → 自动适配
height: 200.h, // 高度适配
margin: EdgeInsets.only(top: 40.h, left: 32.w),
padding: EdgeInsets.all(16.w),
)
// 字体大小（推荐用 .sp，支持系统字体缩放）
Text(
'标题文字',
style: TextStyle(
fontSize: 32.sp,
fontWeight: FontWeight.w600,
),
)
// 圆角、边框等
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.r), // .r 适配圆角
border: Border.all(width: 1.r, color: Colors.grey),
)
// 图标 / Image 大小
Image.asset(
'assets/icon.png',
width: 48.w,
height: 48.h,
)
示例2：
// 一个典型的卡片
Container(
width: 690.w, // 左右留边 30.w
margin: EdgeInsets.symmetric(horizontal: 30.w, vertical: 20.h),
padding: EdgeInsets.all(24.w),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24.r),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 20.r,
offset: Offset(0, 8.h),
),
],
),
child: Column(
children: [
Image.network('...', width: 120.w, height: 120.h),
SizedBox(height: 16.h),
Text('商品名称', style: TextStyle(fontSize: 32.sp)),
SizedBox(height: 8.h),
Text('¥99.00', style: TextStyle(fontSize: 36.sp, color: Colors.red)),
],
),
)
获取当前设备/屏幕信息（常用工具方法）
// 当前屏幕宽度（逻辑像素）
double screenWidth = ScreenUtil().screenWidth;
// 当前屏幕高度
double screenHeight = ScreenUtil().screenHeight;
// 设计稿宽度（你设置的 750）
double designWidth = ScreenUtil().designSize.width;
// 宽度缩放比例（当前屏幕宽度 / 设计稿宽度）
double scaleWidth = ScreenUtil().scaleWidth;
// 高度缩放比例
double scaleHeight = ScreenUtil().scaleHeight;
// 状态栏高度（刘海屏、安全区等）
double statusBarHeight = ScreenUtil().statusBarHeight;
// 底部安全区（iPhone 有 Home Indicator）
double bottomBarHeight = ScreenUtil().bottomBarHeight;
// 是否是横屏
bool isLandscape = ScreenUtil().isLandscape;
响应式判断（小屏 / 大屏 / 平板等）
if (ScreenUtil().screenWidth < 600.w) {
// 小屏幕（手机竖屏）
fontSize: 28.sp
} else if (ScreenUtil().screenWidth < 900.w) {
// 中等屏幕
fontSize: 32.sp
} else {
// 大屏 / 平板
fontSize: 40.sp
}
