mark
mark

Reputation: 1295

sliding tab bar horizontally in flutter

I have something like this in my flutter app code, I am not able to do sliding horizontally in tabs, can u help me with where I made the mistake.

getBody(var data) {
    double maxHeight = MediaQuery.of(context).size.height;
    developer.log('Max height:' + maxHeight.toString());
    return Column(
      children: <Widget>[
        Container(
          child: TabBar(
            labelColor: Colors.black,
            tabs: [
              new Tab(text: 'Credit', icon: new Icon(Icons.list)),
              new Tab(text: 'Debit', icon: new Icon(Icons.pie_chart)),
              new Tab(text: 'Online', icon: new Icon(Icons.insert_chart)),
            ],
            controller: _tabController,
            onTap: _handleTabSelection,
          ),
        ),
        Container(
          margin: new EdgeInsets.all(0.0),
          height: maxHeight - 229,
          child: new Center(
            child: new RefreshIndicator(
              onRefresh: refreshList,
              child: createReportList(context, data),
            ),
          ),
        ),
      ],
    );
  }

Output of the code is , The result of the above code, I have to click on each tab, sliding is not coming

Upvotes: 4

Views: 8516

Answers (1)

Kumar Lokesh Rathod
Kumar Lokesh Rathod

Reputation: 705

Please Try This.

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            leading: Icon(Icons.person_outline),
            title: Text("HOME SCREEN",style: TextStyle(fontSize: 16.0),),
            bottom: PreferredSize(
                child: TabBar(
                    isScrollable: true,
                    unselectedLabelColor: Colors.white.withOpacity(0.3),
                    indicatorColor: Colors.white,
                    tabs: [
                      Tab(
                        child: Text("Kumar"),
                      ),
                      Tab(
                        child: Text("Lokesh"),
                      ),
                      Tab(
                        child: Text("Rathod"),
                      ),
                      Tab(
                        child: Text("Raj"),
                      ),
                      Tab(
                        child: Text("Madan"),
                      ),
                      Tab(
                        child: Text("Manju"),
                      )
                    ]),
                preferredSize: Size.fromHeight(30.0)),
            actions: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 16.0),
                child: Icon(Icons.add_alert),
              ),
            ],
          ),
          body: TabBarView(
            children: <Widget>[
              Container(
                child: Center(
                  child: Text("Tab 1"),
                ),
              ),
              Container(
                child: Center(
                  child: Text("Tab 2"),
                ),
              ),
              Container(
                child: Center(
                  child: Text("Tab 3"),
                ),
              ),
              Container(
                child: Center(
                  child: Text("Tab 4"),
                ),
              ),
              Container(
                child: Center(
                  child: Text("Tab 5"),
                ),
              ),
              Container(
                child: Center(
                  child: Text("Tab 6"),
                ),
              ),
            ],
          )),
    );
  }

Upvotes: 6

Related Questions