Dynamically delete an element of the tab bar in flutter - flutter

Question

I followed the tutorial ( https://flutter.dev/docs/cookbook/design/tabs ) on how to create a flutter tabbar, if I wanted the user to add / remove tabs, how can I do it dynamically ?
class TabBarDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
When I create a tab the scroll must point to the new generated item
When I delete a tab the scroll must point to the previous element

Answer 1

First of all you need to convert your Stateless widget to a stateful widget. Then set the icons as a variable list.
class TabBarDemoState extends State<TabBarDemo> {
var icons = List<Icon>();
initState() {
super.initState();
icons = [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
];
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: icons,
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: icons,
),
),
),
);
}
}
Now say you want to remove an icon from the list. Write a method callback for it, for example a button press. Call this method when the button press or when an event occurs. Something like this:
class TabBarDemoState extends State<TabBarDemo> {
var icons = List<Icon>();
initState() {
super.initState();
icons = [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
];
}
void removeAnIcon() {
if (icons.isNotEmpty) {
setState({
icons.removeAt(0);
});
}
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: icons,
),
title: InkWell(
onTap: () => removeAnIcon(),
Text('Tabs Demo')
),
),
body: TabBarView(
children: icons,
),
),
),
);
}
}
When you call setState then the build function is called again and widget tree is rebuilt. Therefore, when you press on the title then you will remove one icon and get one less icon. Read more about Stateful widgets here