Screen And Logic Flows

This page highlights the important widgets and the steps you need to take to prepare for a workout set play. It also outlines the screen flows of the GOFA workout set experience.

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.
  - See #prepare-a-workout-set

Prepare a workout set

final workoutItem = WorkoutItem(
  poseName: "Squats"
);
BlocProvider.of&#x3C;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

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.

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

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.
  - See #prepare-a-workout-set

Prepare a workout set

final workoutItem = WorkoutItem(
  poseName: "Squats"
);
BlocProvider.of&#x3C;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

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),
          );
        },
      ),
    );

    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.

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

Screen And Logic Flows

Entry page

Prepare a workout set

Enter a workout set

During the workout Set

Pop Menu: "Back" button

Default behavior

Override the behavior

Enter WorkoutSetResultScreen

Exit WorkoutSetResultScreen

"Next" button

Default behavior

Override the behavior

"Back to Home" button

Default behavior

Override the behavior

GOFA Widget

On this page

Screen And Logic Flows

Entry page

Prepare a workout set

Enter a workout set

During the workout Set

Pop Menu: "Back" button

Default behavior

Override the behavior

Enter WorkoutSetResultScreen

Exit WorkoutSetResultScreen

"Next" button

Default behavior

Override the behavior

"Back to Home" button

Default behavior

Override the behavior

GOFA Widget

On this page