diff --git a/examples/api/lib/widgets/overlay/overlay.0.dart b/examples/api/lib/widgets/overlay/overlay.0.dart
index d2a3ad7700..8d1f5f30e0 100644
--- a/examples/api/lib/widgets/overlay/overlay.0.dart
+++ b/examples/api/lib/widgets/overlay/overlay.0.dart
@@ -141,71 +141,76 @@ class _OverlayExampleState extends State<OverlayExample> {
           ),
         ],
       ),
-      body: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
-          Text(
-            'Use Overlay to highlight a NavigationBar destination',
-            style: Theme.of(context).textTheme.bodyMedium,
-          ),
-          const SizedBox(height: 20.0),
-          Row(
+      body: Center(
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Column(
+            spacing: 10.0,
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
-              // This creates a highlight Overlay for
-              // the Explore item.
-              ElevatedButton(
-                onPressed: () {
-                  setState(() {
-                    currentPageIndex = 0;
-                  });
-                  createHighlightOverlay(
-                    alignment: AlignmentDirectional.bottomStart,
-                    borderColor: Colors.red,
-                  );
-                },
-                child: const Text('Explore'),
+              Text(
+                'Use Overlay to highlight a NavigationBar destination',
+                style: Theme.of(context).textTheme.bodyMedium,
               ),
-              const SizedBox(width: 20.0),
-              // 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'),
+              Wrap(
+                spacing: 10.0,
+                runSpacing: 10.0,
+                alignment: WrapAlignment.center,
+                runAlignment: WrapAlignment.center,
+                children: <Widget>[
+                  // This creates a highlight Overlay for
+                  // the Explore item.
+                  ElevatedButton(
+                    onPressed: () {
+                      setState(() {
+                        currentPageIndex = 0;
+                      });
+                      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(() {
-                    currentPageIndex = 2;
-                  });
-                  createHighlightOverlay(
-                    alignment: AlignmentDirectional.bottomEnd,
-                    borderColor: Colors.orange,
-                  );
+                  removeHighlightOverlay();
                 },
-                child: const Text('Saved'),
+                child: const Text('Remove Overlay'),
               ),
             ],
           ),
-          const SizedBox(height: 10.0),
-          ElevatedButton(
-            onPressed: () {
-              removeHighlightOverlay();
-            },
-            child: const Text('Remove Overlay'),
-          ),
-        ],
+        ),
       ),
     );
   }
diff --git a/examples/api/test/widgets/overlay/overlay.0_test.dart b/examples/api/test/widgets/overlay/overlay.0_test.dart
index c626fe17fe..68c1d17557 100644
--- a/examples/api/test/widgets/overlay/overlay.0_test.dart
+++ b/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);
+  });
 }