image
我想实现这种步进机
到目前为止,我已经尝试使用pub.dev
中的AnotherStepper包
List<StepperData> stepperData = [
StepperData(
title: StepperText(
"Order Placed",
textStyle: const TextStyle(
color: Colors.grey,
),
),
subtitle: StepperText("Your order has been placed"),
),
StepperData(
title: StepperText("Preparing"),
subtitle: StepperText("Your order is being prepared"),
),
StepperData(
title: StepperText("On the way"),
subtitle: StepperText(
"Our delivery executive is on the way to deliver your item"),
),
StepperData(
title: StepperText("Delivered",
textStyle: const TextStyle(
color: Colors.grey,
)),
),
];
AnotherStepper(
// this is removed
// dotWidget: Container(
// padding: EdgeInsets.all(8),
// decoration: BoxDecoration(
// color: Colors.red,
// borderRadius: BorderRadius.all(Radius.circular(30))),
// child: Icon(Icons.fastfood, color: Colors.white),
// ),
stepperList: stepperData,
stepperDirection: Axis.vertical,
gap: 20,
iconWidth: 24,
iconHeight: 24,
activeBarColor: Colors.green,
inActiveBarColor: Colors.grey,
activeIndex: 1,
barThickness: 8,
),
我想在activeIndex
的基础上有条件地灰化subtitle
的样式,并且我想实现点颜色。我该怎么做呢?如果能提供帮助,我将不胜感激。
所需图像
image
输出图像
image
1条答案
按热度按时间lrpiutwd1#
您需要一个简单的if else语句来实现使用状态管理定义isActive