Dart: change line color of stepper

275 Views Asked by At

I have a stepper that looks like this: enter image description here

i want that when the button 'testing' is pressed, the lines would change the color to red:

enter image description here

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?

0

There are 0 best solutions below