如何将线性渐变添加到 LinearProgressIndicator？

Question

如何将 LinearGradient 添加到 LinearProgressIndicator？

这是我现在拥有的：

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

我想使用线性渐变而不是颜色。可能吗？

Answer 1

您可以使用 gradient_widgets 包，其中有一个 GradientProgressIndicator 我相信您正在寻找。

你可以这样使用

GradientProgressIndicator(
                  gradient: Gradients.rainbowBlue,
                );

Answer 2

这不完全是问题的答案，但请查看 https://pub.dev/packages/step_progress_indicator（提问时似乎不存在）。

来自他们的页面：

Answer 3

您可以使用具有渐变和固定高度的 Container 而不是 LinearProgressIndicator。宽度将对应于线性进度指示器的值乘以屏幕宽度，例如

    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 4

使用下面的这个小部件来获取渐变进度条

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),
          ),
        ),
      ],
    );
  }
}

示例用法

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

如何将线性渐变添加到 LinearProgressIndicator？

How to add linear gradient to LinearProgressIndicator?

flutter

flutter-animation