Add test orientation recipe (#11657)

_Description of what this PR is changing or adding, and why:_

Adds a recipe that tests if the orientation of an app is in portrait or
landscape mode.

_Issues fixed by this PR (if any):_

Fixes: #2005 

_PRs or commits this PR depends on (if any):_

## Presubmit checklist

- [x] This PR is marked as draft with an explanation if not meant to
land until a future stable release.
- [x] This PR doesn’t contain automatically generated corrections
(Grammarly or similar).
- [x] This PR follows the [Google Developer Documentation Style
Guidelines](https://developers.google.com/style) — for example, it
doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person).
- [x] This PR uses [semantic line
breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks)
of 80 characters or fewer.

Author: antfitch

examples/cookbook/testing/widget/orientation_tests/lib/main.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    const appTitle = 'Orientation Demo';
+
+    return const MaterialApp(
+      title: appTitle,
+      home: OrientationList(
+        title: appTitle,
+      ),
+    );
+  }
+}
+
+class OrientationList extends StatelessWidget {
+  final String title;
+
+  const OrientationList({super.key, required this.title});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text(title)),
+      body: OrientationBuilder(
+        builder: (context, orientation) {
+          return GridView.count(
+            // Create a grid with 2 columns in portrait mode, or 3 columns in
+            // landscape mode.
+            crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
+            // Generate 100 widgets that display their index in the List.
+            children: List.generate(100, (index) {
+              return Center(
+                child: Text(
+                  'Item $index',
+                  style: Theme.of(context).textTheme.displayLarge,
+                ),
+              );
+            }),
+          );
+        },
+      ),
+    );
+  }
+}

examples/cookbook/testing/widget/orientation_tests/pubspec.yaml

@@ -0,0 +1,18 @@
+name: orientation_tests
+description: Orientation widget testing.
+publish_to: none
+
+resolution: workspace
+environment:
+  sdk: ^3.6.0
+
+dependencies:
+  flutter:
+    sdk: flutter
+  path_provider: ^2.1.2
+  path: ^1.9.0
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true

examples/cookbook/testing/widget/orientation_tests/test/widget_test.dart

@@ -0,0 +1,68 @@
+// #docregion OrientationWidgetTest
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:orientation_tests/main.dart';
+
+void main() {
+  group('Orientation', () {
+    // #docregion portrait-mode-test
+    // Check if portrait mode displays correctly.
+    testWidgets('Displays 2 columns in portrait mode', (tester) async {
+      // Build the app.
+      await tester.pumpWidget(const MyApp());
+
+      // Change to portrait.
+      tester.view.physicalSize = const Size(600, 800);
+      tester.view.devicePixelRatio = 1.0;
+      addTearDown(() {
+        tester.view.resetPhysicalSize();
+      });
+      await tester.pump();
+
+      // Verify initial orientation is portrait.
+      Orientation orientation =
+          MediaQuery.of(tester.element(find.byType(OrientationList)))
+              .orientation;
+      expect(orientation, Orientation.portrait);
+
+      // Verify there are only 2 columns in portrait mode.
+      final gridViewFinder = find.byType(GridView);
+      GridView gridView = tester.widget<GridView>(gridViewFinder);
+      SliverGridDelegateWithFixedCrossAxisCount delegate =
+          gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
+      expect(delegate.crossAxisCount, 2);
+    });
+    // #enddocregion portrait-mode-test
+
+    // #docregion landscape-mode-test
+    // Check if landscape mode displays correctly.
+    testWidgets('Displays 3 columns in landscape mode', (tester) async {
+      // Build the app.
+      await tester.pumpWidget(const MyApp());
+
+      // Change to landscape.
+      tester.view.physicalSize = const Size(800, 600);
+      tester.view.devicePixelRatio = 1.0;
+      addTearDown(() {
+        tester.view.resetPhysicalSize();
+      });
+      await tester.pump();
+
+      // Verify initial orientation is landscape.
+      Orientation orientation =
+          MediaQuery.of(tester.element(find.byType(OrientationList)))
+              .orientation;
+      expect(orientation, Orientation.landscape);
+
+      // Verify there are only 3 columns in landscape mode.
+      final gridViewFinder = find.byType(GridView);
+      GridView gridView = tester.widget<GridView>(gridViewFinder);
+      SliverGridDelegateWithFixedCrossAxisCount delegate =
+          gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
+      expect(delegate.crossAxisCount, 3);
+    });
+    // #enddocregion landscape-mode-test
+  });
+}
+// #enddocregion OrientationWidgetTest

examples/pubspec.yaml

@@ -91,6 +91,7 @@ workspace:
   - cookbook/testing/unit/mocking
   - cookbook/testing/widget/finders
   - cookbook/testing/widget/introduction
+  - cookbook/testing/widget/orientation_tests
   - cookbook/testing/widget/scrolling
   - cookbook/testing/widget/tap_drag
   - data-and-backend/json

src/content/cookbook/index.md

@@ -128,4 +128,5 @@ reference to help you build up an application.
 - [An introduction to widget testing](/cookbook/testing/widget/introduction)
 - [Find widgets](/cookbook/testing/widget/finders)
 - [Handle scrolling](/cookbook/testing/widget/scrolling)
+- [Test the orientation of an app](/cookbook/testing/widget/orientation)
 - [Tap, drag, and enter text](/cookbook/testing/widget/tap-drag)