1.概要

一般情况下，正常的手机屏幕是一个完整的矩形，我们用Flutter进行布局的时候，可正常的从顶部布局到底部，如下所示：

image.png

但是，当我们手机屏幕不是完整矩形时，比如刘海屏等异形屏幕时，顶部和底部的部分会被遮挡住，如下所示：

image.png
为了解决不同屏幕的问题，Flutter有了SafeArea，在SafeArea的child里面进行布局，就不会受屏幕的影响，内容不会被遮盖住。

2.源码

SafeArea的源码：

class SafeArea extends StatelessWidget {
  const SafeArea({
    Key key,
    this.left = true,
    this.top = true,
    this.right = true,
    this.bottom = true,
    this.minimum = EdgeInsets.zero,
    this.maintainBottomViewPadding = false,
    @required this.child,
  }) : assert(left != null),
       assert(top != null),
       assert(right != null),
       assert(bottom != null),
       super(key: key);
......
}

1.我们可以通过left/top/right/bottom指定哪些方向不会被遮盖住，默认是全部。
2.通过minimum可以指定最小的被遮盖的距离，默认是0。
3.当设置Scaffold.resizeToAvoidBottomInsets: false时，此时如果屏幕中弹出键盘，界面内容会发生位移，可设置maintainBottomViewPadding=true解决此问题。

3.示例

当不使用SafeArea时：

return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.red,
        ),
      ),
    );

image.png

使用SafeArea后：

return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color: Colors.red,
          ),
        ),
      ),
    );

image.png