Flutter中MediaQuery在安卓Chromium浏览器初始获取屏幕高度异常

问题描述 #

• Flutter组件在安卓Chromium内核移动浏览器中无法正确适配屏幕尺寸，垂直方向显示过长。仅实现了一个占满屏幕的黑色带黄色边框容器，初始渲染时底部边框因超出屏幕范围无法显示，必须点击屏幕后才能调整至完全适配屏幕。
• 额外测试发现，用文本组件展示MediaQuery.of(context).size.height时，点击屏幕前数值为1122，点击后变为738，证明初始获取的屏幕高度存在错误。
• 该问题仅在Chromium内核浏览器中出现，Edge和Opera浏览器无此现象。

复现代码 #

class HomePage extends StatefulWidget {
 @override
 State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
 @override
 Widget build(BuildContext context) {
   return Container(
     decoration: BoxDecoration(
       color: Colors.black,
       border: Border.all(
         color: Colors.yellow,
         width: 3.0,
       ),
     ),
   );
 }
}

问题截图 #

• 点击前（底部边框超出页面）：
  

• 点击后（底部边框适配页面）：
  

内容的提问来源于stack exchange，提问作者Joel Castro