Flutter多屏幕适配问题求助：控件与文本无法适配不同手机屏幕

1. 利用MediaQuery动态获取屏幕参数 #

直接通过MediaQuery获取当前设备的屏幕宽高、像素密度等参数，按比例设置控件尺寸和文本大小，适配不同屏幕。

Container(
  width: MediaQuery.of(context).size.width * 0.8, // 占屏幕宽度的80%
  height: MediaQuery.of(context).size.height * 0.2, // 占屏幕高度的20%
  child: Text(
    '适配文本',
    style: TextStyle(
      fontSize: MediaQuery.of(context).size.width * 0.05, // 按屏幕宽度比例设置字号
    ),
  ),
)

2. 使用LayoutBuilder根据父容器约束布局 #

针对嵌套布局场景，通过LayoutBuilder获取父控件的约束条件，动态调整子控件的大小和文本样式。

LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth * 0.9,
      height: constraints.maxHeight * 0.5,
      child: Text(
        '自适应文本',
        style: TextStyle(
          fontSize: constraints.maxWidth * 0.045,
        ),
      ),
    );
  },
)

3. 引入适配库简化操作 #

使用flutter_screenutil库，基于设计稿尺寸自动完成多屏幕适配，无需手动计算比例：

1. 在pubspec.yaml添加依赖：

dependencies:
  flutter_screenutil: ^5.9.0

2. 全局初始化（在MaterialApp中配置）：

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812), // 传入设计稿的宽高（示例为iPhone X尺寸）
      minTextAdapt: true,
      builder: (context, child) {
        return MaterialApp(
          title: '适配示例',
          theme: ThemeData(primarySwatch: Colors.blue),
          home: child,
        );
      },
      child: const HomePage(),
    );
  }
}

3. 实际使用：

Container(
  width: 300.w, // 对应设计稿的300px宽度
  height: 100.h, // 对应设计稿的100px高度
  child: Text(
    '库适配文本',
    style: TextStyle(fontSize: 16.sp), // 对应设计稿的16px字号
  ),
)

4. 文本自适应进阶：AutoSizeText #

使用auto_size_text控件让文本自动缩小字号，避免因文本过长超出容器：

1. 添加依赖：

dependencies:
  auto_size_text: ^3.0.0

2. 使用示例：

AutoSizeText(
  '超长文本自动调整字号以适应容器宽度，不会出现溢出问题',
  maxLines: 1,
  style: TextStyle(fontSize: 20),
  minFontSize: 12, // 设置最小字号下限
)

5. 横竖屏适配：OrientationBuilder #

通过OrientationBuilder判断设备横竖屏状态，切换对应的布局结构：

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // 竖屏显示2列，横屏显示4列
      crossAxisCount: orientation == Orientation.portrait ? 2 : 4,
      children: List.generate(8, (index) => Container(color: Colors.blue[100*(index%8)])),
    );
  },
)

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