Set state for a button in a ListView - flutter

Question

I have an input page to create a new reminder. On this page you will select several different variables (reminder type, start date, etc.) - at this stage I am just trying to get it work for two variables.
I have a button object that I create, which takes some text, a "isSelected" value (which changes the color to show it is selected) and an onPress callback. The plan is to use a loop to create one of these buttons for each of the necessary selection options and then feed that into a ListView, so you have a scroll-able list of selection option. As you select the item the properties of the new reminder object will update and the color will change to selected.
When I click the button, the value is selected (the print statement shows this) but the button does not change to the new isSelected value, despite a SetState being used. What is it I am missing here? Is it possible to feed buttons into a ListView like this and still have their state update? Or do you need to find another work around?
class AddReminder extends StatefulWidget {
#override
_AddReminderState createState() => _AddReminderState();
}
class _AddReminderState extends State<AddReminder> {
String addReminder = "";
Reminder newReminder = Reminder();
#override
List<Widget> getReminderTypesButton(
String selectionName, List selectionOptions, var reminderVariable) {
// create new list to add widgets to
List<Widget> selectionOptionsWidgets = [];
// loop through selection options and create buttons
for (String selection in selectionOptions) {
bool isSelectedValue = false;
selectionOptionsWidgets.add(
FullWidthButton(
text: selection,
isSelected: isSelectedValue,
onPress: () {
setState(() {
reminderVariable = selection;
isSelectedValue = true;
});
print(reminderVariable);
},
),
);
}
;
// return list of widgets
return selectionOptionsWidgets;
}
Widget build(BuildContext context) {
List<List<Widget>> newList = [
getReminderTypesButton("Type", reminderTypesList, newReminder.type),
getReminderTypesButton(
"Frequency", repeatFrequencyTypesList, newReminder.repeatFrequency)
];
List<Widget> widgetListUnwrap(List<List<Widget>> inputList) {
//takes list of list of widgets and converts to widget list (to feed into list view)
List<Widget> widgetsUnwrapped = [];
for (var mainList in inputList) {
for (var widgets in mainList) {
widgetsUnwrapped.add(widgets);
}
}
return widgetsUnwrapped;
}
return SafeArea(
child: Container(
color: Colors.white,
child: Column(
children: [
Hero(
tag: addReminder,
child: TopBarWithBack(
mainText: "New reminder",
onPress: () {
Navigator.pop(context);
},
)),
Expanded(
child: Container(
child: ListView(
children: widgetListUnwrap(newList),
shrinkWrap: true,
),
),
),
],
),
),
);
}
}
Here are the lists that I reference
List<String> reminderTypesList = [
"Appointment",
"Check-up",
"Other",
];
List<String> repeatFrequencyTypesList = [
"Never",
"Daily",
"Weekly",
"Monthly",
"Every 3 months",
"Every 6 months",
"Yearly",
];
List<List<String>> selectionOptions = [
reminderTypesList,
repeatFrequencyTypesList
];

Answer 1

The reason your state not changing is that every time you call setState(), the whole build function will run again. If you initiate a state (in this case isSelectedValue) within the build method (since the getReminderTypesButton() got called within the build), the code will run through the below line again and again, resetting the state to the initial value.
bool isSelectedValue = false;
This line will always set the isSelectedValue to false, no matter how many time you call setState.
In order to avoid this, you need to place the state outside of the build method, ideally in the FullWidthButton like this:
class FullWidthButton extends StatefulWidget {
const FullWidthButton({Key? key}) : super(key: key);
#override
_FullWidthButtonState createState() => _FullWidthButtonState();
}
class _FullWidthButtonState extends State<FullWidthButton> {
bool isSelectedValue = false;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () => setState(() => isSelectedValue = !isSelectedValue),
// ...other lines
);
}
}