CODEWITHSUNDEEP
flutter
esu
esu

Reputation: 2450

how to create the tab bar without app bar in flutter?

I wish to add the tab app instead of app bar on my home screen. How to create it. Currently, my tab bar added at the bottom of app bar and I have removed the title and elevation. At the same time, I can't say appBar: null as I need some space on the top of the tab bar. 

Widget HomeTap = new Scaffold(

appBar: new AppBar(
bottom: new TabBar(

    indicatorColor: Colors.pinkAccent[100],
    labelColor: Colors.pinkAccent[100],
    indicatorWeight: 0.5,
    unselectedLabelColor: Colors.grey[400],
    tabs: [
      new Tab(text: 'Album',),
      new Tab(text: 'Artist'),
      new Tab(text: 'Playlist'),
      new Tab(text: 'Songs'),
      new Tab(icon: new Icon(Icons.search))
    ]),
title: null,
elevation: 0.0,
),
body: new TabBarView(
children: [
  new Center(
    child: new AlbumWidget(),
  ),
  new Container(),
  new Container(),
  new Container(),
  new Container(),
],
),
);

Upvotes: 15

Views: 16529

Answers (3)

Anshul gour
Anshul gour

Reputation: 365

Tried flexibleSpace?

return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
  flexibleSpace: new Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      TabBar(
        tabs: [
          Tab(text: "Pending"),
          Tab(text: "Delivered"),
          Tab(text: "Rejected"),
        ],
      )
    ],
  ),
),
body: TabBarView(
  children: [
    PendingOrders(),
    DeliveredOrders(),
    RejectedOrders(),
  ],
   ),
   ),
 );

Upvotes: 4

shahab sadeghi
shahab sadeghi

Reputation: 139

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(

            title: Text('Tabs Demo'),
          ),
          body:
          Column(
            children: <Widget>[
              TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.directions_car)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
              Expanded(
                flex: 1,
                child: TabBarView(
                  children: [
                    Icon(Icons.directions_car),
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                  ],
                ),
              )
            ],
          )

        ),
      ),
    );

this worked for me

Upvotes: 9

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

Reputation: 276951

Flutter works with composition. You can pretty much replace any widget with something else. They are not limited to one specific child.

So you can simply do

new Scaffold(
   appBar: new TabBar(
      ...
   ),
   ...
)

The only requirement is for your widget to be of the right interface. Scaffold requires as appBar a PreferredSizeWidget.

Fortunately, TabBar is already a PreferredSizeWidget by default. So no change needed

Upvotes: 29

Related Questions