diff --git a/doc/_sphinx/extensions/flutter_app.py b/doc/_sphinx/extensions/flutter_app.py
index 41ffeafc4..dd10ff937 100644
--- a/doc/_sphinx/extensions/flutter_app.py
+++ b/doc/_sphinx/extensions/flutter_app.py
@@ -44,6 +44,9 @@ class FlutterAppDirective(SphinxDirective):
         In addition, the "code" run mode will try to locate a file or a folder
         with the matching name.
 
+      :subfolder: - optional parameter, needed if the app page is not located in the lib folder.
+      The value of the parameter should be the path from the lib folder to the page source file.
+
       :show: - a list of one or more run modes, which could include "widget",
         "popup", "code", and "infobox". Each of these modes produces a different
         output:
@@ -65,6 +68,7 @@ class FlutterAppDirective(SphinxDirective):
     option_spec = {
         'sources': directives.unchanged,
         'page': directives.unchanged,
+        'subfolder': directives.unchanged,
         'show': directives.unchanged,
         'width': directives.unchanged,
         'height': directives.unchanged,
@@ -222,7 +226,10 @@ class FlutterAppDirective(SphinxDirective):
             out.write('</body>\n</html>\n')
 
     def _generate_code_listings(self, code_id):
-        code_dir = self.source_dir + '/lib/' + self.options.get('page', '')
+        subfolder = self.options.get('subfolder', '')
+        if subfolder and not subfolder.endswith('/'):
+            subfolder += '/'
+        code_dir = self.source_dir + '/lib/' +  subfolder + self.options.get('page', '')
         if os.path.isdir(code_dir):
             files = glob.glob(code_dir + '/**', recursive=True)
         elif os.path.isfile(code_dir + '.dart'):
diff --git a/doc/bridge_packages/flame_forge2d/joints.md b/doc/bridge_packages/flame_forge2d/joints.md
index 47a502433..bb4ddfeb9 100644
--- a/doc/bridge_packages/flame_forge2d/joints.md
+++ b/doc/bridge_packages/flame_forge2d/joints.md
@@ -39,14 +39,6 @@ another.
 
 It can for example be useful when simulating "soft-bodies".
 
-```{flutter-app}
-:sources: ../../examples
-:page: constant_volume_joint
-:show: widget code infobox
-:width: 200
-:height: 200
-```
-
 ```dart
   final constantVolumeJoint = ConstantVolumeJointDef()
     ..frequencyHz = 10
@@ -59,6 +51,13 @@ It can for example be useful when simulating "soft-bodies".
   world.createJoint(ConstantVolumeJoint(world, constantVolumeJoint));
 ```
 
+```{flutter-app}
+:sources: ../../examples
+:subfolder: stories/bridge_libraries/forge2d/joints
+:page: constant_volume_joint
+:show: code popup
+```
+
 `ConstantVolumeJointDef` requires at least 3 bodies to be added using the `addBody` method. It also
 has two optional parameters:
 
@@ -75,14 +74,6 @@ A `DistanceJoint` constrains two points on two bodies to remain at a fixed dista
 
 You can view this as a massless, rigid rod.
 
-```{flutter-app}
-:sources: ../../examples
-:page: distance_joint
-:show: widget code infobox
-:width: 200
-:height: 200
-```
-
 ```dart
 final distanceJointDef = DistanceJointDef()
   ..initialize(firstBody, secondBody, firstBody.worldCenter, secondBody.worldCenter)
@@ -93,6 +84,13 @@ final distanceJointDef = DistanceJointDef()
 world.createJoint(DistanceJoint(distanceJointDef));
 ```
 
+```{flutter-app}
+:sources: ../../examples
+:page: distance_joint
+:subfolder: stories/bridge_libraries/forge2d/joints
+:show: code popup
+```
+
 To create a `DistanceJointDef`, you can use the `initialize` method, which requires two bodies and a
 world anchor point on each body. The definition uses local anchor points, allowing for a slight
 violation of the constraint in the initial configuration. This is useful when saving and
@@ -132,14 +130,6 @@ applied. In most cases, it would be the center of the first object. However, for
 physics interactions between bodies, you can set the `anchor` point to a specific location on one or
 both of the bodies.
 
-```{flutter-app}
-:sources: ../../examples
-:page: friction_joint
-:show: widget code infobox
-:width: 200
-:height: 200
-```
-
 ```dart
 final frictionJointDef = FrictionJointDef()
   ..initialize(ballBody, floorBody, ballBody.worldCenter)
@@ -149,6 +139,13 @@ final frictionJointDef = FrictionJointDef()
   world.createJoint(FrictionJoint(frictionJointDef));
 ```
 
+```{flutter-app}
+:sources: ../../examples
+:page: friction_joint
+:subfolder: stories/bridge_libraries/forge2d/joints
+:show: code popup
+```
+
 When creating a `FrictionJoint`, simulated friction can be applied via maximum force and torque
 values: