Flutter导航栏

Question

我刚开始开发应用，但是在导航栏上遇到了一些困难。底部的导航栏很好，但顶部的不太好。我想去掉按钮上方的灰色空间。

你能帮我吗？

代码：

@override
Widget build(BuildContext context) {   
  return new Scaffold(
    appBar: new AppBar(
      backgroundColor: Colors.grey,
      bottom: new TabBar(
        controller: controller,
        tabs: <Tab>[
          new Tab(icon: new Icon(Icons.arrow_forward)),
          new Tab(icon: new Icon(Icons.arrow_downward)),
          new Tab(icon: new Icon(Icons.arrow_back)),
        ]
      )
    ),        
    body: new TabBarView(
      controller: controller,
      children: <Widget>[
        new first.First(),
        new second.Second(),
        new third.Third(),
        new fourth.Fourth(),
        new fifth.Fifth()
      ]
    ),
  );
}

- Dani Kovács

Answer 1

那就不要使用AppBar，而是使用带有26.0高度的Card。因为你想要一个自定义的应用栏：

final tab = new TabBar(tabs: <Tab>[
  new Tab(icon: new Icon(Icons.arrow_forward)),
  new Tab(icon: new Icon(Icons.arrow_downward)),
  new Tab(icon: new Icon(Icons.arrow_back)),
]);
return new Scaffold(
  appBar: new PreferredSize(
    preferredSize: tab.preferredSize,
    child: new Card(
      elevation: 26.0,
      color: Theme.of(context).primaryColor,
      child: tab,
    ),
  ),

- Rémi Rousselet

Answer 2

为了更新这个问题，
我觉得使用DefaultTabController、AppBar和TabBarView会更加容易。

例如：

final upperTab = const TabBar(tabs: <Tab>[
    Tab(icon: Icon(Icons.arrow_forward)),
    Tab(icon: Icon(Icons.arrow_downward)),
    Tab(icon: Icon(Icons.arrow_back)),
  ]);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: upperTab,
        ),
        body: TabBarView(
          children: [
            Icon(Icons.flight, size: 350),
            Icon(Icons.directions_transit, size: 350),
            Icon(Icons.directions_car, size: 350),
          ],
        ),
      ),
    );
  }

- Hoon