Handling "onPressed" callbacks on dynamically generated buttons - flutter

Question

I created a method that returns a list of Widget using this following code and would like to handle onPressed events individually! (i.e change background color of clicked button)
I'm new to Flutter and can't find a way to do this!
List<Widget> workingHoursButtons() {
List<Widget> timeButtons = [];
for (var i = 8; i <= 17; i++) {
timeButtons.add(
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 59.0,
height: 50.0,
child: FlatButton(
color: i == currentHour ? Color(0xff425660) : null,
shape: RoundedRectangleBorder(
side: BorderSide(),
borderRadius: BorderRadius.circular(3.0),
),
child: Text(
"$i",
style: TextStyle(
color: i == currentHour ? Colors.white : null,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
onPressed: i < currentHour
? null
: () {
print(i);
},
),
),
),
);
}
return timeButtons;
}

Answer 1

So, based on Igor’s comment, yes, you’ll need a customizable StatefulWidget that can hold a unique id per button so that it can be checked against your current hour. A simplified example:
First, setting up your button list:
workingHoursButtons() {
buttonList = new List();
for (var i = 0; i <= 5; i++) {
buttonList.add(MyButton(index: i, whatHour: _currentHour,));
}
}
What your main build Widget might look like, using a ListView.builder:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: ...,
body: ListView.builder(
itemCount: buttonList.length,
itemBuilder: (BuildContext context, int index) {
return buttonList[index];
},
),
);
}
And your custom button widget, passing it an index and your currentHour:
class MyButton extends StatefulWidget {
MyButton({Key key, this.index, this.whatHour}) : super(key: key);
final int index;
final int whatHour;
#override
_MyButtonState createState() => _MyButtonState();
}
class _MyButtonState extends State<MyButton> {
Color _btnColor;
#override
void initState() {
super.initState();
_btnColor = _setInitColor();
}
Color _setInitColor() {
return widget.index == widget.whatHour ? Color(0xff425660) : null;
}
MaterialColor _changeColor() {
// just testing with blue/red colors
return widget.index < widget.whatHour ? Colors.blue : Colors.red;
}
#override
Widget build(BuildContext context) {
return FlatButton(
color: _btnColor,
child: Text('button' + widget.index.toString()),
onPressed: () {
setState(() {
_btnColor = _changeColor();
});
},
);
}
}
Modify as needed.

Answer 2

You need to use StatefulWidget and store colors for each button in a state of your widget. Then, using onPressed event, you can change color for this button (by passing its index) by calling setState method and your changed button will repaint.

Answer 3

I want to thank Igor and TWL for their answers but one thing i've noticed regarding this kind of issue is that there's no "correct" answer. For anyone who'll face this similar issue in the future, i would summarize it in this way.
You'll need a variable that will change for every button press(I had to create 4 in my case)
Call setState() for every change (i.e button press)
Of course depending on your dynamic buttons logic this can get messy but that seems to be the only solution.
On a side note: I think there should a better way to handle button press(using this.?) or maybe it's just me expecting flutter to work like JS