Flutter在iPhone X构建bottomNavigationBar时底部没有预留安全区域的问题

使用 SafeArea widget来包裹tabbar的widget即可解决问题

问题如下

image.png

问题代码

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new DefaultTabController(
      length: 3,
      child: new Scaffold(
        body: new TabBarView(
          children: [
            new FitstTabView(),
            new SecondTabView(),
            new ThirdTabView(),
          ],
        ),
        bottomNavigationBar: new TabBar(
            tabs: [
              new Tab(icon: new Icon(Icons.directions_car)),
              new Tab(icon: new Icon(Icons.directions_transit)),
              new Tab(icon: new Icon(Icons.directions_bike)),
            ],
            labelColor: Colors.blue,
            unselectedLabelColor: Colors.white,
            indicatorColor: Colors.blue,
          ),
        backgroundColor: Colors.black,
      ),
    );
  }
}

解决的关键代码(使用 SafeArea widget来包裹)

bottomNavigationBar: SafeArea(
          child: new TabBar(
            tabs: [
              new Tab(icon: new Icon(Icons.directions_car)),
              new Tab(icon: new Icon(Icons.directions_transit)),
              new Tab(icon: new Icon(Icons.directions_bike)),
            ],
            labelColor: Colors.blue,
            unselectedLabelColor: Colors.white,
            indicatorColor: Colors.blue,
          ),
        ),

其它相关资料参考
https://github.com/flutter/flutter/issues/12099
https://github.com/flutter/flutter/issues/12883
https://github.com/flutter/flutter/issues/12895