I have a stepper that looks like this:

i want that when the button 'testing' is pressed, the lines would change the color to red:
pubsec.yaml dependencies:
status_change: "2.0.0"
StepperWidget.dart:
class StepperWidget extends StatefulWidget{
@override
State<StatefulWidget> createState() => _StepperWidgetState();
}
class _StepperWidgetState extends State<StepperWidget>{
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stepper(
controlsBuilder: (context, _) {
return Row(
children: <Widget>[
],
);
},
type: StepperType.horizontal,
steps: const[
Step(
title:Text("Step 1"),
content: Text(""),
),
Step(
title:Text("Step 2"),
content: Text("Information step 2"),
),
Step(
title:Text("Step 3"),
content: Text("Information step 3"),
),
],
)
)
);
}
}
Stepper.dart is a file from flutter's libraries that I modified. Paste the code below instead of the original _buildHorizontal() method:
Widget _buildHorizontal() {
final List<Widget> children = <Widget>[
for (int i = 0; i < widget.steps.length; i += 1) ...<Widget>[
InkWell(
//TATA NIk
child: Column(
children: <Widget>[
SizedBox(
height: 60,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
if (widget.steps[i].label != null) const SizedBox(height: 110.0,),
Center(child: _buildIcon(i)),
if (widget.steps[i].label != null) SizedBox(height : 110.0, child: _buildLabelText(i),),
],
),
),
Container(
child: _buildHeaderText(i),
),
],
),
),
if (!_isLast(i))
addLine(Colors.blue),
],
];
final List<Widget> stepPanels = <Widget>[];
for (int i = 0; i < widget.steps.length; i += 1) {
stepPanels.add(
Visibility(
maintainState: true,
visible: i == widget.currentStep,
child: widget.steps[i].content,
),
);
}
return Column(
children: <Widget>[
Material(
// elevation: widget.elevation ?? 2,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 24.0),
child: Row(
children: children,
),
),
),
TextButton(onPressed: () {
changeColor();
}, child: Text('testing'))
],
);
}
getLine(color){
return Expanded(
child: Container(
margin: const EdgeInsets.only(left: 0.0, right: 0.0, bottom: 20.0),
height: 4.0,
color: color,
),
);
}
changeColor(){
setState(() {
var index = 0;
for(var line in lines){
lines[index] = getLine(Colors.red);
index ++;
}
});
}
Widget addLine(color){
var line = getLine(color);
lines.add(line);
return lines.last;
}
When I check, the lines colors are changed indeed, but the new color is not shown on the screen. What is going wrong here and what can I do to make the button work?
