flutter 解决 iPhone X 等刘海屏手机导航栏/底部黑线遮挡布局的方法

在上一节（改变 TabBar 背景颜色的方法）中有发现的一个问题：在 iPhone X 等刘海屏手机中，会出现页面被导航栏或者底部黑线遮挡的问题：

解决办法有两种：

1. 使用以下代码获取手机状态栏和底部黑线的高度，然后设置 Widget 的 Padding 或者 Margin：

   //获取状态栏高度（上边距）
   final double topPadding = MediaQuery.of(context).padding.top;
   //获取下边黑线高度（下边距）
   final double bottomPadding = MediaQuery.of(context).padding.bottom;
   

2. 使用 SafeArea（推荐），直接在外面包一层这个 Widget：

   class _MainPageState extends State with SingleTickerProviderStateMixin {
    
     TabController _tabController;
    
     @override
     void initState() {
       super.initState();
       _tabController = TabController(length: 3, vsync: this);
     }
    
     @override
     Widg