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

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,
     ),
   ),

Answer 2

It's not exactly an answer to the question, but check out https://pub.dev/packages/step_progress_indicator (which doesn't seem to have existed when the question was asked).

From their page:

Answer 3

Use this below widget to get the Gradient progress bar

class GradientProgressBar extends StatelessWidget {
  ///it can be anything between 0 to 100
  final int percent;
  final LinearGradient gradient;
  final Color backgroundColor;

  const GradientProgressBar(
      {required this.percent,
      required this.gradient,
      required this.backgroundColor,
      Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          flex: percent,
          fit: FlexFit.tight,
          child: Container(
            decoration: BoxDecoration(
              gradient: gradient,
              borderRadius: percent == 100
                  ? const BorderRadius.all(Radius.circular(4))
                  : const BorderRadius.only(
                      bottomLeft: Radius.circular(4),
                      topLeft: Radius.circular(4)),
            ),
            child: const SizedBox(height: 5.0),
          ),
        ),
        Flexible(
          fit: FlexFit.tight,
          flex: 100 - percent,
          child: Container(
            decoration: BoxDecoration(
              color: backgroundColor,
              borderRadius: percent == 0
                  ? const BorderRadius.all(Radius.circular(4))
                  : const BorderRadius.only(
                      bottomRight: Radius.circular(4),
                      topRight: Radius.circular(4)),
            ),
            child: const SizedBox(height: 5.0),
          ),
        ),
      ],
    );
  }
}

Sample Usage

 const GradientProgressBar(
                  percent: 0,
                  gradient: Gradients.primaryGradient,
                  backgroundColor: Colors.grey,
                ),