flutter SafeArea能很好的解决刘海先看代码：普通屏幕运行结果刘海屏幕运行结果可以看到，在刘海屏幕中，显示位

先看代码：

class FlutterAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment(-1, -1),
      child: Container(
        child: Text(
          "Hello",
        ),
      ),
    );
  }
}

![](//upload-images.jianshu.io/upload_images/3884536-74528c03bd16c1fe.png?imageMogr2/auto-orient/strip|imageView2/2/w/700/format/webp)

普通屏幕运行结果

![](//upload-images.jianshu.io/upload_images/3884536-37a130e68afa714c.png?imageMogr2/auto-orient/strip|imageView2/2/w/598/format/webp)

刘海屏幕运行结果

可以看到，在刘海屏幕中，显示位置不是我们期待的。大部分刘海区域不是我们所触发按钮的区域。这是我们可以使用SafeArea Widget来很好的解决这个问题。

class FlutterAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Align(
        alignment: Alignment(-1, -1),
        child: Container(
          child: Text(
            "Hello",
          ),
        ),
      ),
    );
  }
}

![](//upload-images.jianshu.io/upload_images/3884536-f0791b12a4ddb015.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

SafeArea处理结果

当然，使用这个Widget也能很好的处理iPhone X类似的底部bottom的区域。

class FlutterAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Align(
        alignment: Alignment(-1, 1),
        child: Container(
          child: Text(
            "Hello",
          ),
        ),
      ),
    );
  }
}

![](//upload-images.jianshu.io/upload_images/3884536-be0f39a041dddfd0.png?imageMogr2/auto-orient/strip|imageView2/2/w/692/format/webp)

SafeArea处理之后

所以大部分情况下，使用SafeArea能很好的解决刘海，不规则屏幕的显示问题。