Reputation: 1662
In the web world I have scrollable tabs offered by material-ui that looks like that.
I am trying create the same thing using flutter, I did a listview in a row however I am unable to create the next
and previous
buttons.
Help or a reference of the widget if it is already made is highly appreciated. Thank you
Upvotes: 2
Views: 1006
Reputation: 12673
Check this out
Builder(
builder: (context) {
return Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: (){
if(_tabController.index > 0){
_tabController.animateTo(_tabController.index - 1);
}else{
Scaffold.of(context).showSnackBar(SnackBar(content: Text("Can't go back"),));
}
},
),
Expanded(
child: TabBar(
isScrollable: true,
controller: _tabController,
labelStyle: TextStyle(
color: Colors.black
),
unselectedLabelColor: Colors.black,
labelColor: Colors.blue,
tabs: List.generate(
20,
(index) {
return Tab(
text: "Tab $index",
);
},
),
),
),
IconButton(
icon: Icon(Icons.arrow_forward_ios),
onPressed: (){
if(_tabController.index+1 < 20){
_tabController.animateTo(_tabController.index + 1);
}else{
Scaffold.of(context).showSnackBar(SnackBar(content: Text("Can't move forward"),));
}
},
),
],
);
}
)
Upvotes: 4