如何向 LinearProgressIndicator 添加线性渐变？答案

【问题标题】：How to add linear gradient to LinearProgressIndicator?如何向 LinearProgressIndicator 添加线性渐变？
【发布时间】：2019-07-18 05:46:03
【问题描述】：

如何将 LinearGradient 添加到 LinearProgressIndicator？

这就是我现在拥有的：

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

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

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

您可以使用具有渐变和固定高度的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,
     ),
   ),

【讨论】：

【解决方案2】：

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

来自他们的页面：

【讨论】：

【解决方案3】：

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

比你可以这样使用

GradientProgressIndicator(
                  gradient: Gradients.rainbowBlue,
                );

【讨论】：