Flutter适配之：SafeArea控件

在不同的平台上，有很多特殊的位置，比如 Android 系统的状态栏，或者 iPhone X 的“齐刘海”，我们应该避免在这些位置放置元素。

解决方案就是使用 SafeArea 部件（下面的例子分别是使用和没使用 SafeArea 的效果）

未用SafeArea.png 使用SafeArea.png

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class SafeAreaTest extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _SafeAreaTestState();
  }
}

class _SafeAreaTestState extends State<SafeAreaTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea( // 区别在于有没有这一层SafeArea的包裹
        child: Stack(
          children: <Widget>[
            Container(
              alignment: Alignment.topCenter,
              color: Colors.amber,
              padding: EdgeInsets.only(top: 49),
              child: Text('内容'),
            ),
            Container(
              alignment: Alignment.center,
              height: 49,
              color: Colors.white,
              child: Text('使用SafeArea', style: TextStyle(fontSize: 15),),
            )
          ],
        ),
      ),
    );
  }

}