Change badge number - flutter

Question

In MainPage, it has 2 bottom navigation bar. One is icon with text, another is icon with text and badge number. When my app is launched, the badge is display 3 in second tab. This works fine.
class MainPage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MainPageState();
}
method(int num) => _MainPageState().showBadge(num);
}
class _MainPageState extends State<MainPage>
with SingleTickerProviderStateMixin {
int _selectedIndex = 0;
int count = 0;
TabController _tabController;
PageController _pageController;
#override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
_pageController = PageController(initialPage: _selectedIndex);
showBadge(3);
}
void showBadge(int number) {
setState(() {
count = number;
});
}
void onPageChange(int index) {
setState(() {
_selectedIndex = index;
});
}
void _onItemTapped(int index) {
_pageController.animateToPage(index,
duration: kTabScrollDuration, curve: Curves.ease);
}
#override
Widget build(BuildContext context) {
return WillPopScope(
child: Scaffold(
body: FixTabBarView(
pageController: _pageController,
onPageChange: onPageChange,
tabController: _tabController,
children: <Widget>[
TabA(),
TabB(),
]),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.A), title: Text('TabA')),
BottomNavigationBarItem(
icon: Stack(children: <Widget>[
Icon(
Icons.B,
),
Positioned(
top: 1.0,
right: 0.0,
child: Stack(
children: <Widget>[
Icon(Icons.brightness_1, size: 18, color: Colors.red),
Positioned(
top: 1.0,
right: 4.0,
child: new Text(count.toString(),
style: new TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w500)),
)
],
),
)
]),
title: Text('TabB'),
),
],
currentIndex: _selectedIndex,
fixedColor: Colors.blue,
onTap: _onItemTapped,
),
),
onWillPop: () {},
);
}
}
When tab 2 is clicked, I want the badge change to 1,but it throws error.
class TabB extends StatefulWidget {
#override
State<StatefulWidget> createState() => _TabBState();
}
class _TabBState extends State<TabB> {
#override
void initState() {
super.initState();
_bloc.callApi().then((onValue){
MainPage().method(onValue); // onValue is the number return from server
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Tab 2"),
));
}
}
Error
════════ Exception caught by widgets library
═══════════════════════════════════ The following assertion was thrown
building NotificationListener: setState()
called in constructor: _MainPageState#6ed53(lifecycle state: created,
no widget, not mounted)
This happens when you call setState() on a State object for a widget
that hasn't been inserted into the widget tree yet. It is not
necessary to call setState() in the constructor, since the state is
already assumed to be dirty when it is initially created.

Answer 1

Instead of trying to call a function from your parent widget to modify the badge when that child widget is loaded, you should add a listener to your _tabController and change the badge when the tab is selected, like this:
#override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
_tabController.addListener((){
if(_tabController.index == 1){
setState(() {
showBadge(1);
});
}
});
_pageController = PageController(initialPage: _selectedIndex);
showBadge(3);
}
Make sure you adjust the if for the tab index you want to match.
On your TabB you can declare that it accepts a Function as part of its constructor and then call that function:
class TabB extends StatefulWidget {
final Function showBadge;
TabB({this.showBadge});
#override
State<StatefulWidget> createState() => _TabBState();
}
class _TabBState extends State<TabB> {
#override
void initState() {
super.initState();
_bloc.callApi().then((onValue){
widget.showBadge(onValue); // onValue is the number return from server
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Tab 2"),
)
);
}
}
On your Main widget:
FixTabBarView(
pageController: _pageController,
onPageChange: onPageChange,
tabController: _tabController,
children: <Widget>[
TabA(),
TabB(showBadge: showBadge,),
]
)