Deepyr Documentation

Horizontal Steps

Preview

Register
Choose plan
Purchase
Receive Product

Dart

Steps(
  [
    Step([text('Register')], style: [Step.primary]),
    Step([text('Choose plan')], style: [Step.primary]),
    Step([text('Purchase')]),
    Step([text('Receive Product')]),
  ],
)

Vertical Steps

Preview

Register
Choose plan
Purchase
Receive Product

Dart

Steps(
  style: [Steps.vertical],
  [
    Step([text('Register')], style: [Step.primary]),
    Step([text('Choose plan')], style: [Step.primary]),
    Step([text('Purchase')]),
    Step([text('Receive Product')]),
  ],
)

Responsive (vertical on small screen, horizontal on large)

Preview

Register
Choose plan
Purchase
Receive Product

Dart

Steps(
  style: [
    Steps.vertical, // Default for mobile
    Steps.horizontal.at(Breakpoint.lg), // Horizontal on large screens
  ],
  [
    Step([text('Register')], style: [Step.primary]),
    Step([text('Choose plan')], style: [Step.primary]),
    Step([text('Purchase')]),
    Step([text('Receive Product')]),
  ],
)

With custom content in StepIcon

Preview

😕Step 1
😃Step 2
😍Step 3

Dart

Steps(
  [
    Step(
      [
        StepIcon([text('😕')]), // Use StepIcon for custom markers
        text('Step 1'),
      ],
      style: [Step.neutral],
    ),
    Step(
      [
        StepIcon([text('😃')]),
        text('Step 2'),
      ],
      style: [Step.neutral],
    ),
    Step([
      StepIcon([text('😍')]),
      text('Step 3'),
    ]),
  ],
)

With data-content

Use the `dataContent` property to add a symbol inside the step's circle.

Preview

Dart

Steps(
  [
    Step([text('Step 1')], dataContent: '?', style: [Step.neutral]),
    Step([text('Step 2')], dataContent: '!', style: [Step.neutral]),
    Step([text('Step 3')], dataContent: '✓', style: [Step.neutral]),
    Step([text('Step 4')], dataContent: '✕', style: [Step.neutral]),
    Step([text('Step 5')], dataContent: '★', style: [Step.neutral]),
    Step([text('Step 6')], dataContent: '', style: [Step.neutral]),
    Step([text('Step 7')], dataContent: '●', style: [Step.neutral]),
  ],
)

Custom colors

Preview

Fly to moon
Shrink the moon
Grab the moon
Sit on toilet

Dart

Steps(
  [
    Step([text('Fly to moon')], style: [Step.info]),
    Step([text('Shrink the moon')], style: [Step.info]),
    Step([text('Grab the moon')], style: [Step.info]),
    Step([text('Sit on toilet')], dataContent: '?', style: [Step.error]),
  ],
)

With scrollable wrapper

Preview

Dart

Container(
  style: [Layout.overflowXAuto],
  [
    Steps(
      [
        Step([text('start')]),
        Step([text('2')], style: [Step.secondary]),
        Step([text('3')], style: [Step.secondary]),
        // ... more steps
        Step([text('end')]),
      ],
    ),
  ],
)