如何向LinearProgressIndicator添加线性渐变?这就是我现在拥有的:
LinearProgressIndicator( value: 0.3, valueColor: AlwaysStoppedAnimation<Color>(Colors.blue), )
我想用线性渐变来代替颜色,可以吗?
dohp0rv51#
除了LinearProgressIndicator,你可以使用一个渐变的固定高度的Container,其宽度对应于线性进度指示器的值乘以屏幕的宽度,例如:
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, ), ),
2exbekwf2#
您可以使用gradient_widgets软件包,其中有一个GradientProgressIndicator,这就是我相信你正在寻找的。比你能用的要多
GradientProgressIndicator
GradientProgressIndicator( gradient: Gradients.rainbowBlue, );
7gyucuyw3#
这并不完全是问题的答案,但请查看https://pub.dev/packages/step_progress_indicator(在提出问题时似乎还不存在)。从他们的页面:
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, ),
s2j5cfk05#
可以使用linearGradient属性向LinearProgressIndicator添加线性渐变。例如:LinearPercentIndicator( lineHeight: 24.h, barRadius: Radius.circular(30.r), percent: 0.25, linearGradient: LinearGradient(colors: [ Colors.green, Colors.Red ]), )
LinearPercentIndicator( lineHeight: 24.h, barRadius: Radius.circular(30.r), percent: 0.25, linearGradient: LinearGradient(colors: [ Colors.green, Colors.Red ]), )
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), ),
6条答案
按热度按时间dohp0rv51#
除了
LinearProgressIndicator
,你可以使用一个渐变的固定高度的Container
,其宽度对应于线性进度指示器的值乘以屏幕的宽度,例如:2exbekwf2#
您可以使用gradient_widgets软件包,其中有一个
GradientProgressIndicator
,这就是我相信你正在寻找的。比你能用的要多
7gyucuyw3#
这并不完全是问题的答案,但请查看https://pub.dev/packages/step_progress_indicator(在提出问题时似乎还不存在)。
从他们的页面:
toiithl64#
使用下面的小部件获取渐变进度条
样本使用
s2j5cfk05#
可以使用linearGradient属性向LinearProgressIndicator添加线性渐变。例如:
LinearPercentIndicator( lineHeight: 24.h, barRadius: Radius.circular(30.r), percent: 0.25, linearGradient: LinearGradient(colors: [ Colors.green, Colors.Red ]), )
axr492tv6#
您可以通过这种方式实现,进度从0到1