Flutter - setState is not Updating inner Custom Stateful widget - flutter

Question

I have created a Custom Segments widget which creates Multiple TABS according to List. I am updating selectionsList from homepage.dart but still, my segments are not updating runtime according to changed selectionsList
Segments.dart (Custom SegmentWidget which creates Cupertino tabs)
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SegmentsWidget extends StatefulWidget {
#override
_SegmentsWidgetState createState() => _SegmentsWidgetState();
final List selectionsList;
final ValueChanged<int> onSelectTab;
final VoidCallback onTap;
final int selectedValue;
SegmentsWidget(
{this.selectionsList, this.onSelectTab, this.onTap, this.selectedValue});
}
class _SegmentsWidgetState extends State<SegmentsWidget> {
Map<int, Widget> tabWidget = Map<int, Widget>();
int selectedTab = 0;
#override
void initState() {
super.initState();
print("INit State ${widget.selectionsList}");
setState(() {
widget.selectionsList.asMap().forEach((index, value) {
tabWidget.addAll({
index: Container(
height: 40,
child: Center(
child: Text(
widget.selectionsList[index],
style: TextStyle(fontFamily: 'Exo2', fontSize: 12.0),
),
))
});
});
});
}
#override
void didUpdateWidget(SegmentsWidget oldWidget) {
super.didUpdateWidget(oldWidget);
print("Did update");
}
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Expanded(
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: CupertinoSegmentedControl<int>(
padding: EdgeInsets.symmetric(vertical: 8),
children: tabWidget,
onValueChanged: (int index) {
setState(() {
selectedTab = index;
});
widget.onSelectTab(index);
},
groupValue: widget.selectedValue ?? selectedTab,
),
),
)
],
),
);
}
}
HomePage.dart
From Home Page, I am updating selection array but still my segments are not updating according to selectionList.
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<String> selection;
int selectedTab = -1;
#override
void initState() {
super.initState();
selection = ["A", "B"];
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Dynamic Segments")),
body: Container(
child: Column(
children: <Widget>[
SegmentsWidget(
selectionsList: selection,
onSelectTab: (selectTab) {
setState(() {
selectedTab = selectTab;
});
},
),
RaisedButton(child: Text("AB"),onPressed: (){
setState(() {
selection = ["A", "B"];
});
}),
RaisedButton(child: Text("ABC"),onPressed: (){
setState(() {
selection = ["A", "B", "C"];
});
}),
RaisedButton(child: Text("ABCD"),onPressed: (){
setState(() {
selection = ["A", "B", "C","D"];
});
})
],
),
),
);
}
}
I assume that initState of Segment Widget called once only. I even tried in didUpdateWidget but still not getting updated tabs.
Issue: How to update tabWidgets which is mentioned in my custom widget from another stateful widget?

Answer 1

I change some parts of code.
Instead of calling your code (that need to be called again on setState) in initState() function, call your code inside the widget with your own method.
see getTabChilds() function below of code.
class _SegmentsWidgetState extends State<SegmentsWidget> {
Map<int, Widget> tabWidget = Map<int, Widget>();
int selectedTab = 0;
#override
void initState() {
super.initState();
print("INit State ${widget.selectionsList}");
}
#override
void didUpdateWidget(SegmentsWidget oldWidget) {
super.didUpdateWidget(oldWidget);
print("Did update");
}
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Expanded(
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: CupertinoSegmentedControl<int>(
padding: EdgeInsets.symmetric(vertical: 8),
children: getTabChilds(),
onValueChanged: (int index) {
setState(() {
selectedTab = index;
});
widget.onSelectTab(index);
},
groupValue: widget.selectedValue ?? selectedTab,
),
),
)
],
),
);
}
Map<int, Widget> getTabChilds() {
tabWidget = Map<int, Widget>();
widget.selectionsList.asMap().forEach((index, value) {
tabWidget.addAll({
index: Container(
height: 40,
child: Center(
child: Text(
widget.selectionsList[index],
style: TextStyle(fontFamily: 'Exo2', fontSize: 12.0),
),
))
});
});
return tabWidget;
}
}
It's tested and works fine.