Steps

steps

Is a component that presents a sequence that leads the user through well-defined steps. This can be used for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.

Usage

List<XelaStepItem> steps = [
    XelaStepItem(id: 1, title: "Step 1", caption: "Basic information", state: XelaStepsState.ACTIVE),
    XelaStepItem(id: 2, title: "Step 2", caption: "User management"),
    XelaStepItem(id: 3, title: "Step 3", caption: "Fleet settings"),
    XelaStepItem(id: 4, title: "Step 4", caption: "Confirmation"),
];

Container(
    padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
    child: Container(
      padding: EdgeInsets.all(24),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(24),
        color: _isDark ? XelaColor.Gray2 : XelaColor.Gray12
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Getting Started", style: XelaTextStyle.XelaHeadline.apply(color: _isDark ? XelaColor.Gray11 : XelaColor.Gray2),),
          Text("Complete these steps and become a member", style: XelaTextStyle.XelaCaption.apply(color: XelaColor.Gray6),),
          Padding(padding: EdgeInsets.symmetric(vertical: 24), child: XelaDivider(style: XelaDividerStyle.DOTTED, color: _isDark ? XelaColor.Gray3 : XelaColor.Gray11,),),
          XelaSteps(
            steps: steps,
            primaryAccentColor: _isDark ? XelaColor.Green1 : XelaColor.Green2,
            secondaryAccentColor: _isDark ? XelaColor.Green8 : XelaColor.Green10,
            primaryTextColor: _isDark ? XelaColor.Gray6 : XelaColor.Gray2,
            secondaryTextColor: _isDark ? XelaColor.Gray7 : XelaColor.Gray7,
            secondaryColor: _isDark ? XelaColor.Gray3 : XelaColor.Gray11,
            errorColor: _isDark ? XelaColor.Red5 : XelaColor.Red3,
          ),
          Padding(padding: EdgeInsets.only(top: 24), child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              XelaButton(
                size: XelaButtonSize.MEDIUM,
                  onPressed: (){},
                text: "Skip for now",
                type: XelaButtonType.SECONDARY,
                background: Colors.transparent,
                foregroundColor: _isDark ? XelaColor.Green1 : XelaColor.Green2,
                defaultBorderColor: _isDark ? XelaColor.Gray3 : XelaColor.Gray11,
                  ),
              XelaButton(
                  size: XelaButtonSize.MEDIUM,
                  background: _isDark ? XelaColor.Green1 : XelaColor.Green2,
                  foregroundColor: Colors.white,
                  text: "Continue",
                  rightIcon: Icon(Icons.arrow_forward, size: 20, color: Colors.white),
                  onPressed: (){
                    setState(() {
                      var currentStep = steps.firstWhereOrNull((element) => element.state == XelaStepsState.ACTIVE);
                      if(currentStep != null) {
                        var currentStepIndex = steps.indexOf(currentStep);
                        if(currentStepIndex == 2) {
                          currentStep.state = XelaStepsState.ERROR;
                          return;
                        }
                        if(currentStepIndex != -1) {
                          currentStep.state = XelaStepsState.COMPLETED;
                          if(currentStepIndex < steps.length - 1) {
                            steps[currentStepIndex+1].state = XelaStepsState.ACTIVE;
                          }
                        }
                      }
                      else {
                        if(steps[0].state == XelaStepsState.DEFAULT) {
                          steps[0].state = XelaStepsState.ACTIVE;
                        }
                      }
                    });
                  }
              )
            ],
          ),)

        ],
      ),
    ),
  ),

Properties XelaSteps

Name Type Default Value Required Description
steps List<XelaStepItem> - YES Array steps items
orientation XelaStepsOrientation XelaStepsOrientation.VERTICAL NO Steps orientation (HORIZONTAL, VERTICAL)
primaryTextColor Color XelaColor.Gray3 NO Primary text color
secondaryTextColor Color XelaColor.Gray7 NO Secondary text color
primaryAccentColor Color XelaColor.Blue3 NO Primary accent color
secondaryAccentColor Color XelaColor.Blue11 NO Secondary accent color
secondaryColor Color XelaColor.Gray11 NO Secondary color
errorColor Color XelaColor.Red3 NO Error color
iconColor Color Colors.white NO Icon color
lines bool true NO Show lines between steps

Properties XelaStepsItem

Name Type Default Value Required Description
id int - YES Step Item ID
title String? null NO Step Item title text
caption String? null NO Step Item caption text
state XelaStepsState XelaStepsState.DEFAULT NO Step Item state (DEFAULT, COMPLETED, ACTIVE, ERROR)