一个易于定制的水平和垂直步进器Flutter包。

入门

在pubspec.yaml的dependencies:部分，添加以下行

dependencies:
  another_stepper: <latest_version>

示例：AnotherStepper

Dummy StepperData

  List<StepperData> stepperData = [
    StepperData(
      title: "USA",
      subtitle: "Hello",
    ),
    StepperData(
      title: "Canada",
      subtitle: "Hey",
    ),
    StepperData(
      title: "Turkey",
      subtitle: "Hi",
    ),
  ];

水平（默认）

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  horizontalStepperHeight: 70,
)

水平（默认）输出

垂直（默认）

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  horizontalStepperHeight: 70,
)

垂直（默认）输出

水平反转

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  horizontalStepperHeight: 70,
  inverted: true,
)

水平反转输出

垂直反转

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  horizontalStepperHeight: 70,
  inverted: true,
)

垂直反转输出

活动索引

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  horizontalStepperHeight: 70,
  inverted: false,
  activeIndex: 2,
)

活动索引输出

垂直间距

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  horizontalStepperHeight: 70,
  inverted: false,
  activeIndex: 2,
  gap: 60,
)

垂直间距输出

水平间距

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  horizontalStepperHeight: 70,
  inverted: false,
  activeIndex: 2,
  gap: 60,
)

水平间距输出

条形厚度

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  horizontalStepperHeight: 70,
  inverted: false,
  activeIndex: 2,
  barThickness: 8,
)

条形厚度输出

自定义点和条

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  horizontalStepperHeight: 70,
  dotWidget: Container(
  padding: EdgeInsets.all(8),
  decoration: BoxDecoration(
  color: Colors.red,
  borderRadius: BorderRadius.all(Radius.circular(30))
  ),
  child: Icon(Icons.navigate_next_sharp, color: Colors.white),
  ),
  activeBarColor: Colors.red,
  inActiveBarColor: Colors.grey,
  activeIndex: 1,
)

自定义点和条输出

自定义点、条、点厚度和长文本

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  horizontalStepperHeight: 70,
  dotWidget: Container(
  padding: EdgeInsets.all(8),
  decoration: BoxDecoration(
  color: Colors.red,
  borderRadius: BorderRadius.all(Radius.circular(30))
  ),
  child: Icon(Icons.fastfood, color: Colors.white),
  ),
  activeBarColor: Colors.red,
  inActiveBarColor: Colors.grey,
  activeIndex: 2,
  barThickness: 8,
)

点、条、点厚度和长文本输出

GitHub

查看 Github