概要：
1.全屏幕特色，及存在的问题；
2.适配IOS全屏iPhone X；
3.适配Android 全面屏
总结：
全屏幕特点，以及存在的问题
特点：
1、大、屏占比高、长宽比不再是比16:9 ，达到了19.5：9甚至更高；
2、短边的像素，density的取值都是一样的，所以需要适配的是长边；
问题：
1.传统布局的高度不足，导致上下留黑边
2.甚至屏幕顶部或底部的布局，如弹框，会在全面屏手机上发生位移
页面适配
全面屏的页面适配分两种情况：
1.一种是对于页面已经使用了Scaffold的appBar与bottomNavigationBar的页面是不需要额外适配的，因为Scaffold框架会自动帮我们完成这些适配工作
2.另外一种情况，在很多页面没有用到Scaffold或者Scaffold的appBar与bottomNavigationBar,那么该如何适配全面屏呢？
对于这种情况要适配全面屏需要知道以下要点：
适配要点：
1.顶部NavigationBar上部预留安全区域；
2.底部NavigationBar 底部预留安全区域；
对于安全区域的适配有两种方案：
方案一：采用SafeArea来包裹页面，SafeArea是Flutter中的一个用于适配全面屏的组件，它类似于RN中SafeAreaView主要是用于解决适配全面屏手机的安全区域的问题；
优缺点：相对简单，只需要引入SafeArea，但不够灵活。
方案二：借助MediaQuery.of(context).padding获取屏幕四周的Padding，然后根据Padding自己实现对安全区域的控制；
优缺点：需要借助MediaQuery.of(context).padding自己实现对安全区域的控制，相对复杂些，但灵活度比较高
具体使用方法：
效果图：
代码：（自己写的具体例子）