How to add linear gradient to LinearProgressIndicator?

Question

How can you add a LinearGradient to a LinearProgressIndicator?

This is what I have now:

LinearProgressIndicator(
 value: 0.3,
 valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

Instead of a colour I would like to use a linear gradient. Is it possible?

Answer 1

You can use the gradient_widgets package which has a GradientProgressIndicator that is what I belive you're looking for.

Than you can use like so

GradientProgressIndicator(
                  gradient: Gradients.rainbowBlue,
                );

Answer 2

Instead of a LinearProgressIndicator, you could used a Container with a gradient and fixed height. The width would correspond to the value of the linear progress indicator times the width of the screen, e.g.

    Container(
      width: MediaQuery.of(context).size.width * <value>,
      decoration: BoxDecoration(
        gradient: LinearGradient(
        colors: [
          Colors.red,
          Colors.blue
        ],
        stops: [
          0.1,
          0.5,
        ],
       ),
     ),
     child: SizedBox(
       height: 20.0,
     ),
   ),