Skip to main content

Screen And Logic Flows

Entry page​

  • You should have a screen like "SelectPoseScreen" in our Demo App
    • The screen displays the list of poses that user can choose from
    • Prepare the workout set when user chooses one of the poses.

Prepare a workout set​

final workoutItem = WorkoutItem(
  poseName: "Squats"
);
BlocProvider.of<WorkoutSetBloc>(context).add(
  WorkoutSetSetup(
    workoutItem: <a data-footnote-ref href="#user-content-fn-1">workoutItem</a>,
    totalSecondsAllowed: 30, // 30 seconds challenge
    targetRepsToStart: null,
    autoStopSetWhenRepsFulfilled: false,
  ),
);

Enter a workout set​


Future<void> navigateToWorkoutSetScreen({
  required BuildContext context,
}) async {
  if (context.mounted) {
     // navigate to WorkoutSetScreen
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => WorkoutSetScreen(),
      ),
    );
  }
}

During the workout Set​

  • WorkoutSetBloc contains all the data

    • WorkoutSetState
      • Ref: workout-set-state-data
      • Notable fields:
        • totalSecondsAllowed
        • secondsLeft
        • secondsUsed
        • targetRepsToStart
        • repsDone
        • workoutSetStatus
    • skeletonStream
    • poseAnalyserStream

Pop Menu: "Back" button​

Default behavior​

The following is the function navigateToPreviousDuringWorkout responsible for navigation to next screen after workout. The default behavior is to pop twice to get the the entry screen.

  /// navigateToPreviousDuringWorkout , navigate to the previous screen during workout
  Function(BuildContext)? navigateToPreviousDuringWorkout = (BuildContext context) {
    Navigator.pop(context);
  };

Override the behavior​

You can use WorkoutSetSetup event to override the Back button navigation behavior.

    BlocProvider.of<WorkoutSetBloc>(context).add(
      WorkoutSetSetup(
        ...
        navigateToPreviousDuringWorkout: (context) {
          your navigation logic to previous screen...
        },
      ),
    );

Enter WorkoutSetResultScreen​

  • When user has finished the workout set (or Fitness Challenge), user can click "See results" in WorkoutSetScreen to navigate to WorkoutSetResultScreen.
  • This flow is handled by GOFA package.

Exit WorkoutSetResultScreen​

WorkoutSetResultScreen

  • Two buttons are present in result screen for users to navigate away from our Workout Set pages
    • Next
    • Back to Home

"Next" button​

Default behavior​

The following is the function navigateToNextAfterWorkout responsible for navigation to next screen after workout. The default behavior is to pop twice to get the the entry screen.

  /// navigateToNextAfterWorkout, navigate to the next screen after workout
  Function(BuildContext) navigateToNextAfterWorkout = (BuildContext context) {
    // assuming this is called in WorkoutSetResultScreen, so pop twice to get to SelectPoseScreen
    Navigator.pop(context);
    Navigator.pop(context);

    // if the SelectPoseScreen route name is known, can instead use this
    // Navigator.popUntil(context, ModalRoute.withName('/select_pose'));
  };

Override the behavior​

You can use WorkoutSetSetup event to override the Next button navigation behavior.

    BlocProvider.of<WorkoutSetBloc>(context).add(
      WorkoutSetSetup(
        ...
        navigateToNextAfterWorkout: (context) {
          // for example, navigate to WorkoutAfterScreen
          Navigator.pushNamedAndRemoveUntil(
            context,
            WorkoutAfterScreen.routeName,
            ModalRoute.withName(SelectPoseScreen.routeName),
          );
        },
      ),
    );

"Back to Home" button​

Default behavior​

The following is the function navigateToHomeAfterWorkout responsible for navigation to home screen after workout.

Since v1.0.5. The default behavior is (context) => false, that is, not showing "Back to Home" button.

Override the behavior​

You can use WorkoutSetSetup event to override the Next button navigation behavior. 

    BlocProvider.of<WorkoutSetBloc>(context).add(
      WorkoutSetSetup(
        ...
        navigateToHomeAfterWorkout: (context) {
          // for example, pop until /home screen
          Navigator.popUntil(context, ModalRoute.withName('/home'));

          // or
          // popUntil is used to pop all the screens until the `HomeScreen` is reached.
          // Navigator.popUntil(context, (route) => route.isFirst);
        },
        // navigateToHomeAfterWorkout: (context) => false // to disable the button
      ),
    );

After exiting GOFA Widgets/Screen,

  • you can still have access to WorkoutSetBloc's state data.
  • The previous workout analytic data remains until next WorkoutSetSetup event is added.

GOFA Widget​

Widgets in "gofa_pose" to compose in your app

  • High-level Widgets
    • WorkoutSetScreen
      • The main screen to play out the workout set with count down and rep counting.
    • WorkoutSetResultScreen
      • The screen to show workout results after user has done the workout
  • Low-level Widgets
    • CameraView
    • PoseDetectorView