Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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(),
],
),
);
like image 377
esu Avatar asked Apr 03 '18 04:04

esu


People also ask

How do you use TabBar view in Flutter?

You can create tabs using the TabBar widget. In this example, create a TabBar with three Tab widgets and place it within an AppBar . return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: const TabBar( tabs: [ Tab(icon: Icon(Icons. directions_car)), Tab(icon: Icon(Icons.


2 Answers

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

like image 150
Rémi Rousselet Avatar answered Oct 07 '22 17:10

Rémi Rousselet


 @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

like image 40
shahab sadeghi Avatar answered Oct 07 '22 17:10

shahab sadeghi