博客地址：flutterall.com

先看代码：

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

普通屏幕运行结果

刘海屏幕运行结果

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

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

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",
          ),
        ),
      ),
    );
  }
}

SafeArea处理之后

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

本地代码地址

Flutter Container
Flutter SafeArea
Flutter Row Column MainAxisAlignment Expanded
Flutter Image全解析
Flutter 常用按钮总结
Flutter ListView豆瓣电影排行榜
Flutter Card
Flutter Navigator&Router(导航与路由)
OverscrollNotification不起效果引起的Flutter感悟分享
Flutter 上拉抽屉实现
Flutter 豆瓣客户端，诚心开源
Flutter 更改状态栏颜色