【flutter项目实战】第八节 在flutter项目中实现屏幕适配

在Flutter项目中实现屏幕适配，可以使用flutter_screenutil这个插件。以下是如何使用该插件的步骤和示例代码：

1. 添加flutter_screenutil依赖到你的pubspec.yaml文件中。

dependencies:
  flutter:
    sdk: flutter
  flutter_screenutil: ^0.5.0

2. 安装依赖并重启你的应用。
3. 在你的main.dart文件中初始化ScreenUtil。

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
void main() {
  // 设置设计稿宽度和高度，一般设置为UI设计图宽度
  ScreenUtil.init(
    BoxConstraints(
      maxWidth: 1080, 
      maxHeight: 1920, 
    ),
    designSize: Size(360, 690), // 设计稿尺寸，一般是UI给出的标准尺寸
    context: _context, // 传入上下文
  );
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 其他代码...
  }
}

4. 使用ScreenUtil进行尺寸适配。

// 将UI图上的px单位转换为Flutter中的dp(设备独立像素)
double width = 100.w; // 宽度为100px
double height = 200.h; // 高度为200px
 
// 字体大小适配
double fontSize = 28.sp; // 字体大小为28px
 
return Container(
  width: width,
  height: height,
  child: Text(
    'Hello World',
    style: TextStyle(
      fontSize: fontSize,
    ),
  ),
);

使用ScreenUtil提供的扩展.w和.h可以轻松将px单位转换为dp单位，扩展.sp可以将px单位转换为与屏幕宽度相关的字体大小。

以上就是在Flutter项目中使用flutter_screenutil插件实现屏幕适配的基本步骤和示例代码。