Create Onboarding Screen for First-Time Users #79
Description
Description:
Design and implement a detailed onboarding experience for first-time users to personalize their fitness journey. The onboarding flow will collect essential user details such as age, weight, height, gender, workout preference (home/gym), and ideal workout duration.
Tasks:
-
Create a multi-step onboarding flow (use
PageViewor a stepper-style UI). -
Design clean, minimal, and consistent onboarding screens with illustrations or icons for visual appeal.
-
Collect the following inputs:
- Name: text input
- Age: number input (validation: 10–90)
- Gender: radio buttons or dropdown (Male/Female)
- Height: in cm (validation: 100–250)
- Weight: in kg (validation: 30–200)
- Workout Type: selectable cards (Home or Gym)
- Preferred Duration: dropdown or slider (e.g., 15, 30, 45, 60 minutes)
-
Add a summary screen at the end showing all entered details for confirmation.
-
Validate each step before proceeding.
-
Store all collected information in Firestore under the user’s UID.
-
Save a local flag (e.g.,
isOnboarded = trueinshared_preferences) so returning users skip onboarding. -
Redirect users to the dashboard once onboarding is complete.
-
Ensure the UI supports both light and dark modes.
-
Add animations or transitions for smooth navigation between steps.
-
Include screenshots of each onboarding step in the pull request for UI verification.
Acceptance Criteria:
- Onboarding appears only once for new users.
- All fields validate correctly before proceeding.
- Data successfully saves to Firestore under the authenticated user.
- Returning users bypass onboarding automatically.
- UI matches OptiFit’s theme and remains responsive on all devices.
- Screenshots included for each onboarding screen and the final summary page.