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: <Widget>[
            new FitstTabView(),
            new SecondTabView(),
            new ThirdTabView(),
          ],
        ),
        bottomNavigationBar: new TabBar(
            tabs: <Widget>[
              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: <Widget>[
              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,
          ),
        ),

其它相关资料参考
iPhone X: Additional bottom padding for BottomNavigationBar · Issue #12099 · flutter/flutter · GitHub
Account for bottom safe area for interactive widgets · Issue #12883 · flutter/flutter · GitHub
Differentiate between Window padding and margins in dart:ui · Issue #12895 · flutter/flutter · GitHub