Flutter navigation bar

Question

I just started app developing and im struggling with navigation bar. The bottom one is good but the one at the top is not. I want to remove the grey space above the buttons.

Can you help me?

Code:

@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

Don't use Appbar then. Use a Card with an elevation of 26.0. As what you want is a custom appbar:

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