全屏幕特点，及存在的问题
全面屏手机的特点：
- 大、屏占比高、长宽比达到了19.5:9甚至更高；
- 短点的像素、density的取值都是一样的，所以需要适配的是长。
问题：
- 传统布局的高度不足，导致上下留黑边；
- 基于屏幕顶部和底部的布局，如弹框，在全面屏上显示会发生位移；
- 安全区域的问题。
适配要点
顶部NavigationBar的上面和底部NavigationBar的下面要预留安全区域。
适配方案
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自己手动实现对安全区域的控制（简单且灵活）。
