Optimize Overlay sample to avoid overflow (#155861)

Fixes [Optimize official `Overlay` sample to avoid overflowing.](https://github.com/flutter/flutter/issues/155860)

When checking https://main-api.flutter.dev/flutter/widgets/Overlay-class.html on a laptop screen it overflows as the layout uses Row instead of more robust widget for spacing `Wrap`

Quick Friday night fix. :) 

| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/user-attachments/assets/eea6f1d9-e860-4ebd-8d16-2d8f4141e1ec" /> | <img src="https://github.com/user-attachments/assets/9f8426ba-d541-44a6-8ea6-2e34636b7e82"  /> |

examples/api/lib/widgets/overlay/overlay.0.dart

@@ -141,71 +141,76 @@ class _OverlayExampleState extends State<OverlayExample> {
           ),
         ],
       ),
-      body: Column(
+      body: Center(
-        mainAxisAlignment: MainAxisAlignment.center,
+        child: Padding(
-        children: <Widget>[
+          padding: const EdgeInsets.all(8.0),
-          Text(
+          child: Column(
-            'Use Overlay to highlight a NavigationBar destination',
+            spacing: 10.0,
-            style: Theme.of(context).textTheme.bodyMedium,
-          ),
-          const SizedBox(height: 20.0),
-          Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
-              // This creates a highlight Overlay for
+              Text(
-              // the Explore item.
+                'Use Overlay to highlight a NavigationBar destination',
-              ElevatedButton(
+                style: Theme.of(context).textTheme.bodyMedium,
-                onPressed: () {
-                  setState(() {
-                    currentPageIndex = 0;
-                  });
-                  createHighlightOverlay(
-                    alignment: AlignmentDirectional.bottomStart,
-                    borderColor: Colors.red,
-                  );
-                },
-                child: const Text('Explore'),
               ),
-              const SizedBox(width: 20.0),
+              Wrap(
-              // This creates a highlight Overlay for
+                spacing: 10.0,
-              // the Commute item.
+                runSpacing: 10.0,
-              ElevatedButton(
+                alignment: WrapAlignment.center,
-                onPressed: () {
+                runAlignment: WrapAlignment.center,
-                  setState(() {
+                children: <Widget>[
-                    currentPageIndex = 1;
+                  // This creates a highlight Overlay for
-                  });
+                  // the Explore item.
-                  createHighlightOverlay(
+                  ElevatedButton(
-                    alignment: AlignmentDirectional.bottomCenter,
+                    onPressed: () {
-                    borderColor: Colors.green,
+                      setState(() {
-                  );
+                        currentPageIndex = 0;
-                },
+                      });
-                child: const Text('Commute'),
+                      createHighlightOverlay(
+                        alignment: AlignmentDirectional.bottomStart,
+                        borderColor: Colors.red,
+                      );
+                    },
+                    child: const Text('Explore'),
+                  ),
+                  // This creates a highlight Overlay for
+                  // the Commute item.
+                  ElevatedButton(
+                    onPressed: () {
+                      setState(() {
+                        currentPageIndex = 1;
+                      });
+                      createHighlightOverlay(
+                        alignment: AlignmentDirectional.bottomCenter,
+                        borderColor: Colors.green,
+                      );
+                    },
+                    child: const Text('Commute'),
+                  ),
+                  // This creates a highlight Overlay for
+                  // the Saved item.
+                  ElevatedButton(
+                    onPressed: () {
+                      setState(() {
+                        currentPageIndex = 2;
+                      });
+                      createHighlightOverlay(
+                        alignment: AlignmentDirectional.bottomEnd,
+                        borderColor: Colors.orange,
+                      );
+                    },
+                    child: const Text('Saved'),
+                  ),
+                ],
               ),
-              const SizedBox(width: 20.0),
-              // This creates a highlight Overlay for
-              // the Saved item.
               ElevatedButton(
                 onPressed: () {
-                  setState(() {
+                  removeHighlightOverlay();
-                    currentPageIndex = 2;
-                  });
-                  createHighlightOverlay(
-                    alignment: AlignmentDirectional.bottomEnd,
-                    borderColor: Colors.orange,
-                  );
                 },
-                child: const Text('Saved'),
+                child: const Text('Remove Overlay'),
               ),
             ],
           ),
-          const SizedBox(height: 10.0),
+        ),
-          ElevatedButton(
-            onPressed: () {
-              removeHighlightOverlay();
-            },
-            child: const Text('Remove Overlay'),
-          ),
-        ],
       ),
     );
   }

examples/api/test/widgets/overlay/overlay.0_test.dart

@@ -38,4 +38,19 @@ void main() {
     expect(find.text(commutePage), findsNothing);
     expect(find.text(savedPage), findsNothing);
   });
+
+  testWidgets('Narrow layout does not overflow', (WidgetTester tester) async {
+    // Set a narrow screen size.
+    tester.view
+      ..physicalSize = const Size(320, 480)
+      ..devicePixelRatio = 1;
+    addTearDown(tester.view.reset);
+
+    await tester.pumpWidget(
+      const example.OverlayApp(),
+    );
+
+    // Verify that no overflow errors occur.
+    expect(tester.takeException(), isNull);
+  });
 }