CODEWITHSUNDEEP
dartflutter
Dani Kovács
Dani Kovács

Reputation: 131

Flutter navigation bar

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

Upvotes: 9

Views: 29942

Answers (2)

Hoon
Hoon

Reputation: 687

To update this question,
It's much easier for me to use DefaultTabController with AppBar and TabBarView.

For example,

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

Upvotes: 1

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277657

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

Upvotes: 14

Related Questions