颤振导航栏

Question

我刚开始开发应用程序，我正在为导航栏而苦苦挣扎。底部的很好，但顶部的不好。我想删除按钮上方的灰色 space。

你能帮帮我吗？

代码：

@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()
      ]
    ),
  );
}

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,
    ),
  ),

Answer 2

要更新这个问题，
这对我来说更容易使用 DefaultTabController 与 AppBar 和 TabBarView。

例如，

inal 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),
          ],
        ),
      ),
    );
  }

颤振导航栏

Flutter navigation bar

dart

flutter