Flutter SafeArea - 异形屏适配利器

Flutter SafeArea - 异形屏适配利器

现有手机可能会出现的问题
现在的手机已经不是方方正正的屏幕了，所以我们在写一些UI的时候可能会出现如下问题：

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(this.title),
        ),
        body: ListView(
            itemExtent: 30,
            children: List.generate(100, (index) {
              return Text(
                'Data',
                style: TextStyle(fontSize: 18),
              );
            })));
  }

如何解决
为了解决这个问题，Flutter 引入了 SafeArea（安全区域），我们只需要在代码中加入SafeArea

 Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(this.title),
        ),
        body: SafeArea(
            child: ListView(
                itemExtent: 30,
                children: List.generate(100, (index) {
                  return Text(
                    'Data',
                    style: TextStyle(fontSize: 18),
                  );
                }))));
  }

可以看到问题已经被解决。