使用 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,
      ),
    );
  }
}

解決的關(guān)鍵代碼(使用 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,
          ),
        ),

其它相關(guān)資料參考
https://github.com/flutter/flutter/issues/12099
https://github.com/flutter/flutter/issues/12883
https://github.com/flutter/flutter/issues/12895