Flutter - appbar bottom property not updating properly with setState - flutter

Question

I'm building an app with an appbar that has the bottom property that will only be visible if the user selects the middle item of the 3 items (item index = 1) in the bottom navigation bar. here's the code below.
class _MainPageState extends State<MainPage> {
int index = 2;
TabBar bottomBar = null;
#override
Widget build(BuildContext context) => DefaultTabController(
initialIndex: 0,
length: 3,
child: Scaffold(
appBar: AppBar(title: Text(widget.title), bottom: bottomBar),
bottomNavigationBar: BottomNavigationBar(
currentIndex: index,
selectedItemColor: Colors.teal,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.bolt),
label: ('Devices'),
),
BottomNavigationBarItem(
icon: Icon(Icons.pie_chart),
label: ('Cluster'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: ('Settings'),
),
],
onTap: (int index) => setState(() => this.index = index),
),
body: buildPages(),
),
);
Widget buildPages() {
// bottomNavBarPageBuilder
switch (index) {
case 0:
setState(() {
this.bottomBar = null;
print(index);
});
return DeviceListPage();
case 1:
setState(() {
print(index);
this.bottomBar = TabBar(
tabs: [
Tab(
icon: Icon(Icons.power),
),
Tab(
icon: Icon(Icons.power),
),
Tab(
icon: Icon(Icons.power),
)
],
);
});
return TabBarView(
children: [UserLocalPage(), Container(), Container()]);
case 2:
setState(() {
print(index);
this.bottomBar = null;
});
return SettingsPage();
default:
setState(() {
print(index);
this.bottomBar = null;
});
return Container();
}
}
}
the problem is that sometimes the setState doesn't update the "bottom" property of the appBar. here's a video demonstrating the problem
how can I make the bottom property of the appBar be updated properly? any help would be much appreciated thankyou 🙏🙏

Answer 1

Sorry for a late answer. Would you kindly try this code for me?
Also, although I didn't change that in the code below, I noticed that your index == 2, but initialIndex == 0. I would recommend creating a const variable to represent initialIndex, like this:
static const int initialIndex = 0;
int index = initialIndex;
//skipped code
initialIndex: initialIndex,
class _MainPageState extends State<MainPage> {
int index = 2;
TabBar bottomBar = null;
#override
Widget build(BuildContext context) => DefaultTabController(
initialIndex: 0,
length: 3,
child: Scaffold(
appBar: AppBar(title: Text(widget.title), bottom: bottomBar),
bottomNavigationBar: BottomNavigationBar(
currentIndex: index,
selectedItemColor: Colors.teal,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.bolt),
label: ('Devices'),
),
BottomNavigationBarItem(
icon: Icon(Icons.pie_chart),
label: ('Cluster'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: ('Settings'),
),
],
onTap: _onTap,
),
body: buildPages(),
),
);
void _onTap(int index) {
if(index != this.index) {
setState(() {
this.index = index;
switch(index) {
case 1:
bottomBar = TabBar(
tabs: [
Tab(
icon: Icon(Icons.power),
),
Tab(
icon: Icon(Icons.power),
),
Tab(
icon: Icon(Icons.power),
)
],
);
break;
default:
bottomBar = null;
}
});
}
}
Widget buildPages() {
// bottomNavBarPageBuilder
switch (index) {
case 0:
return DeviceListPage();
case 1:
return TabBarView(
children: [UserLocalPage(), Container(), Container()]);
case 2:
return SettingsPage();
default:
return Container();
}
}
}