---
# System prepended metadata

title: Widget - NeoStepper
tags: [Flutter-Widget]

---

# NeoStepper Package Documentation

## NeoStepper

**Description:** 
`NeoStepper` is a custom widget designed to display a series of steps or progress indicators. It utilizes `NeoStepperItem` for individual steps and `NeoStepperDivider` for visual separation between these steps.

### Parameters for NeoStepper

| Parameter Name | Type                   | Is Required | Description                      |
| -------------- | ---------------------- | ----------- | -------------------------------- |
| steps          | List<NeoStepperItem>   | Yes         | The list of step items to display in the stepper. |

## NeoStepperDivider

**Description:** 
`NeoStepperDivider` is used within `NeoStepper` to create a visual divider between steps.

### Parameters for NeoStepperDivider

| Parameter Name | Type    | Is Required | Description                      |
| -------------- | ------- | ----------- | -------------------------------- |
| completed      | bool    | Yes         | Indicates if the step is completed. |
| defaultColor   | Color?  | No          | Color of the divider when the step is not completed. |
| completedColor | Color?  | No          | Color of the divider when the step is completed. |

## NeoStepperItem

**Description:** 
`NeoStepperItem` represents an individual step in `NeoStepper`.

### Parameters for NeoStepperItem

| Parameter Name | Type     | Is Required | Description                               |
| -------------- | -------- | ----------- | ----------------------------------------- |
| iconUrn        | String   | Yes         | URN for the step icon.                    |
| isCompleted    | bool     | No          | Indicates if the step is completed.       |
| isCurrent      | bool     | No          | Indicates if the step is the current one. |
| width          | double?  | No          | Width of the icon.                        |
| height         | double?  | No          | Height of the icon.                       |

## Example Response

```json
{
    "type": "neo_stepper",
    "steps": [
        {
            "type": "neo_stepper_item",
            "iconUrn": "step1_icon_urn",
            "isCompleted": true,
            "isCurrent": false
        },
        {
            "type": "neo_stepper_item",
            "iconUrn": "step2_icon_urn",
            "isCompleted": false,
            "isCurrent": true
        },
        {
            "type": "neo_stepper_item",
            "iconUrn": "step3_icon_urn",
            "isCompleted": false,
            "isCurrent": false
        }
    ]
}