flutter 如何在LinearProgressIndicator中添加线性渐变?

omtl5h9j  于 2023-02-16  发布在  Flutter
关注(0)|答案(6)|浏览(433)

如何向LinearProgressIndicator添加线性渐变?
这就是我现在拥有的:

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

我想用线性渐变来代替颜色,可以吗?

dohp0rv5

dohp0rv51#

除了LinearProgressIndicator,你可以使用一个渐变的固定高度的Container,其宽度对应于线性进度指示器的值乘以屏幕的宽度,例如:

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

2exbekwf2#

您可以使用gradient_widgets软件包,其中有一个GradientProgressIndicator,这就是我相信你正在寻找的。
比你能用的要多

GradientProgressIndicator(
                  gradient: Gradients.rainbowBlue,
                );
7gyucuyw

7gyucuyw3#

这并不完全是问题的答案,但请查看https://pub.dev/packages/step_progress_indicator(在提出问题时似乎还不存在)。
从他们的页面:

toiithl6

toiithl64#

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

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

s2j5cfk05#

可以使用linearGradient属性向LinearProgressIndicator添加线性渐变。例如:
LinearPercentIndicator( lineHeight: 24.h, barRadius: Radius.circular(30.r), percent: 0.25, linearGradient: LinearGradient(colors: [ Colors.green, Colors.Red ]), )

axr492tv

axr492tv6#

您可以通过这种方式实现,进度从0到1

Container(
        width: double.infinity,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),
            gradient: LinearGradient(colors: const [
              Color(0xFF2607E7),
              Color(0xFF57C0EF),
              Colors.grey,
            ], stops: [
              progress / 2,
              progress,
              progress,
            ])),
        child: const SizedBox(height: 10),
      ),

相关问题