A compact set of five step/progress indicators for onboarding, multi-step forms, quizzes, and pipelines. Mix angled segments, segmented bars, bracketed steppers, pill dots, and square boxes—all themeable and silky-smooth in FlutterFlow.

Functionality

• Five variants

  1. Angled Steps — parallelogram segments with dynamic fill.

  2. Segmented Bar — rounded container split into equal milestones.

  3. Bracketed Outline Stepper — outlined squares with left/right brackets.

  4. Pill Dot Stepper — tiny rounded pills for dense UIs.

  5. Square Box Stepper — solid + outline boxes for crisp states.

• Configurable counts & values: steps, active index, completed range, or 0–100% percent.

• Interactive (optional): tap a segment/dot to jump to that step.

• Animations: fill, fade, slide, and color transitions for step changes.

• Theming: colors, radius, spacing, stroke width, container border/shadow.

• States: inactive, active/current, completed, disabled; error/warning accents.

• Labels: optional step numbers, icons, or tooltips.

• Orientation: horizontal/vertical and LTR/RTL support.

• Data-ready: bind to Firestore/Supabase/REST/local state.

• Accessibility: high contrast, readable sizing, screen-reader labels.

• Light/Dark modes with performance-friendly rendering.

Great for: onboarding wizards, checkout flows, course/lesson progress, task pipelines, uploads, and KPI summaries where a discrete step view is clearer than a single bar.

Keywords: FlutterFlow progress, stepper, steps bar, segmented progress, milestone bar, angled steps, slanted segments, bracketed stepper, outline squares, pill dots, dot indicator, square boxes, wizard steps, onboarding progress, checkout steps, quiz progress, multi-step form, pagination dots, percent bar, active index, completed state, animation, color theme, radius, spacing, stroke width, RTL support, accessible UI, data binding, Firestore, Supabase, REST API, Flutter widget, FlutterFlow component, modern UI, minimal design, responsive layout.