icon in LineProgressIndicator on flutter

Viewed 19

How do I create an icon on the LineProgressIndicator, and the icon will be in accordance with the value of the LineProgressIndicator, as shown below

[![first picturesecond image(when value increases)third image (value already has a maximum value)

1 Answers

Try this :

Stack(children: [
          LinearProgressIndicator(
              value: 0.4,
              valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
              backgroundColor: Colors.grey,
              minHeight: 40),
          LayoutBuilder(builder: (context, constrains) {
            var leftPadding = constrains.maxWidth * 0.4 - 20;
            var topPadding = (40 - 40) / 2;
            return Padding(
              padding: EdgeInsets.only(left: leftPadding, top: topPadding),
              child: Icon(Icons.arrow_circle_right, size: 40),
            );
          })
        ]),

You can use the Image instead of Icon for the one which you have asked.

Related