Flutter 全屏幕适配

全面屏手机的特点：

1、大、屏占比高、长宽比达到了19.5:9甚至更高；

2、短点的像素、density的取值都是一样的，所以需要适配的是长。

效果图

问题：

1、传统布局的高度不足，导致上下留黑边；

2、基于屏幕顶部和底部的布局，如弹框，在全面屏上显示会发生位移；

3、安全区域的问题。

适配方案

1、使用了Scaffold的appbar与bottomNavigationBar是不需要适配的，因为Scaffold框架会自动帮我们完成这些适配工；

2、使用SafeArea来包裹页面，SafeArea是Flutter中的一个用于适配全面屏的组件，简单但是相较于第三点不灵活。类似于iOS中storyboard中的Safe Area Relative Margins和React Native的SafeAreaView；

效果图

3、借助MediaQuery.of(context).padding来获取屏幕四周的padding，然后根据padding自己手动实现对安全区域的控制（简单且灵活）。

效果图

android手机更大的屏幕高宽比例

在AndroidManifest.xml声明max_aspect值

由于全面屏手机的高宽比比之前大，如果不适配的话，Android默认为最大的宽高比是1.86，小于全面屏手机的宽高比，因此，在全面屏手机上打开部分App时，上下就会留有空间，显示为黑条。这样非常影响视觉体验，另外全面屏提供的额外空间也没有得以利用，因此，这样的应用需要做相关适配。

针对此问题，Android官方提供了适配方案，即提高App所支持的最大屏幕纵横比，实现起来也比较简单，在AndroidManifest.xml中做如下配置即可：

<meta-data android:name="android.max_aspect"  android:value="ratio_float"/>

其中ratio_float为浮点数，官方建议为2.1或更大，因为18.5：9=2.055555555……，如果日后出现纵横比更大的手机，此值将需要设为更大。

因此，建议开发者在自己App AndroidManifest的Application标签下面增加下面一段代码：

<meta-data android:name="android.max_aspect" android:value="2.1" />

效果图