Flutter中Container设置什么属性可适配不同手机屏幕，相关报错如何解决

错误原因 #

你当前代码触发报错的核心原因：MediaQuery.of(context)调用时传入的context不存在上级MediaQuery节点，Flutter无法获取到屏幕尺寸参数。绝大多数场景下是因为当前代码的上下文处在MaterialApp/WidgetsApp的外层，这两个组件才会默认帮你初始化MediaQuery实例。

修复与适配方案 #

方案1：调整代码层级确保context有效 #

把使用MediaQuery的代码放到MaterialApp的home属性对应的组件内部，即可正常读取屏幕参数，示例代码如下：

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container( 
          color: Colors.grey[700],
          // 此处context属于MaterialApp内部，可正常获取MediaQuery实例
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: const Icon(Icons.home, size: 100.0,),
        ),
      ),
    );
  }
}

方案2：更简洁的占满适配写法 #

如果你的Container只需要占满父组件的可用空间，不需要主动调用MediaQuery，直接设置expands属性为true即可，适配性更强：

Container(
  color: Colors.grey[700],
  expands: true, // 自动占满父组件所有可用空间，自动适配不同屏幕尺寸
  child: const Icon(Icons.home, size: 100.0,),
)

方案3：兼容异常场景的写法 #

如果必须手动获取屏幕尺寸，可使用maybeOf方法添加空判断规避报错：

Container(
  color: Colors.grey[700],
  height: MediaQuery.maybeOf(context)?.size.height ?? 800,
  width: MediaQuery.maybeOf(context)?.size.width ?? 360,
  child: const Icon(Icons.home, size: 100.0,),
)

适配优化建议 #

• 内部元素尺寸不要写死固定值，可通过屏幕尺寸的百分比计算，例如图标大小可以设为MediaQuery.of(context).size.width * 0.2，保证不同屏幕下的显示占比一致
• 复杂布局优先使用LayoutBuilder，根据父组件的实际约束动态调整子组件尺寸，适配性比直接读取全局屏幕尺寸更好

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