Flutter 解决iphoneX底部小黑条遮盖内容的方法

解决办法有两种：

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<MainPage> with SingleTickerProviderStateMixin {
 
  TabController _tabController;
 
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //使用 SafeArea 适配 iPhone X 等刘海屏不规则手机
      bottomNavigationBar: SafeArea(
        //使用 Material 改变 TabBar 背景色
        child: Material(
          color: Colors.blue,
          child: TabBar(
              ...
          ),
        ),
      ),
      body: TabBarView(
        ...
      ),
    );
  }
}