Onboarding Progress Indicator
Component Detail
Description
Visual step indicator widget shown during the onboarding flow to communicate to the user which stage they are on (organization selection → authentication → ready). Provides orientation for first-time users and reduces abandonment. Adapts step labels to Phase 1 (email/password) and Phase 2 (BankID/Vipps) flows.
onboarding-progress-indicator
Summaries
The Onboarding Progress Indicator provides first-time users with a clear visual map of where they are in the registration and authentication process, from organization selection through credential setup to the ready state. Research consistently shows that progress indicators reduce user abandonment during multi-step onboarding flows by setting expectations and conveying that the end is near. For a multi-tenant platform where each organization may use a different authentication method, this component also reduces confusion by labeling each step appropriately for Phase 1 (email/password) and Phase 2 (BankID/Vipps) flows. Lower abandonment rates during onboarding directly improve user activation metrics and reduce the cost of re-engagement campaigns.
The Onboarding Progress Indicator is a low-complexity, self-contained widget with no external dependencies — it accepts only the current step index and total step count as inputs, making it one of the safest items to schedule early or in parallel with other work. Estimated effort is one day including animation and tests. The only coordination required is agreeing on step labels for each authentication phase before implementation, which requires a short alignment with the product team and BankID/Vipps integration owners to confirm the final step count per flow. Step label copy for Phase 2 (BankID/Vipps) should be reviewed for regulatory or UX compliance requirements in the Norwegian market.
No backend dependency or API integration is involved.
OnboardingProgressIndicator is a stateless Flutter widget parameterized by currentStep (zero-indexed or one-indexed — agree on convention with callers) and totalSteps. Render a row of numbered step dots where completed steps show a filled/checked state, the active step shows a highlighted active state, and future steps are muted. Animate dot transitions using Flutter's AnimatedContainer or TweenAnimationBuilder for smooth step progression. Step labels should be sourced from a constants map keyed by step index and auth phase — avoid hardcoding strings inline to support future localization.
The widget carries no state, no streams, and no async calls, keeping it fully testable with widget tests. When the auth phase changes (Phase 1 vs Phase 2), the parent should pass an updated label map or phase enum to adjust step descriptions without rebuilding the entire widget tree.
Responsibilities
- Render numbered step dots with active/complete states
- Display step labels appropriate to current auth phase
- Animate transition between steps
Interfaces
OnboardingProgressIndicator({required int currentStep, required int totalSteps})
build(BuildContext context)