Skip to content

Commit

Permalink
Minor updates to new orientation recipe (#11682)
Browse files Browse the repository at this point in the history
  • Loading branch information
parlough authored Feb 6, 2025
1 parent d4f7a1e commit 7f1a604
Show file tree
Hide file tree
Showing 7 changed files with 66 additions and 62 deletions.
8 changes: 4 additions & 4 deletions examples/cookbook/design/orientation/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ class OrientationList extends StatelessWidget {
body: OrientationBuilder(
builder: (context, orientation) {
return GridView.count(
// Create a grid with 2 columns in portrait mode, or 3 columns in
// landscape mode.
// 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.
// 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,
style: TextTheme.of(context).displayLarge,
),
);
}),
Expand Down
9 changes: 5 additions & 4 deletions examples/cookbook/lists/grid_lists/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,16 @@ class MyApp extends StatelessWidget {
),
// #docregion GridView
body: GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
// Create a grid with 2 columns.
// If you change the scrollDirection to horizontal,
// this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List.
// 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.headlineSmall,
style: TextTheme.of(context).headlineSmall,
),
);
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ class OrientationList extends StatelessWidget {
body: OrientationBuilder(
builder: (context, orientation) {
return GridView.count(
// Create a grid with 2 columns in portrait mode, or 3 columns in
// landscape mode.
// 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.
// 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,
style: TextTheme.of(context).displayLarge,
),
);
}),
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// #docregion OrientationWidgetTest

// #docregion scaffolding
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:orientation_tests/main.dart';

void main() {
group('Orientation', () {
// #enddocregion scaffolding
// #docregion portrait-mode-test
// Check if portrait mode displays correctly.
testWidgets('Displays 2 columns in portrait mode', (tester) async {
Expand All @@ -21,15 +21,15 @@ void main() {
await tester.pump();

// Verify initial orientation is portrait.
Orientation orientation =
final 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 =
final gridView = tester.widget<GridView>(gridViewFinder);
final delegate =
gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
expect(delegate.crossAxisCount, 2);
});
Expand All @@ -50,19 +50,20 @@ void main() {
await tester.pump();

// Verify initial orientation is landscape.
Orientation orientation =
final 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 =
final gridView = tester.widget<GridView>(gridViewFinder);
final delegate =
gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
expect(delegate.crossAxisCount, 3);
});
// #enddocregion landscape-mode-test
// #docregion scaffolding
});
}
// #enddocregion OrientationWidgetTest
// #enddocregion scaffolding
8 changes: 4 additions & 4 deletions src/content/cookbook/design/orientation.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,15 +111,15 @@ class OrientationList extends StatelessWidget {
body: OrientationBuilder(
builder: (context, orientation) {
return GridView.count(
// Create a grid with 2 columns in portrait mode, or 3 columns in
// landscape mode.
// 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.
// 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,
style: TextTheme.of(context).displayLarge,
),
);
}),
Expand Down
18 changes: 10 additions & 8 deletions src/content/cookbook/lists/grid-lists.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,16 @@ generate a list of 100 widgets that display their index in the list.
<?code-excerpt "lib/main.dart (GridView)" replace="/^body\: //g"?>
```dart
GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
// Create a grid with 2 columns.
// If you change the scrollDirection to horizontal,
// this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List.
// 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.headlineSmall,
style: TextTheme.of(context).headlineSmall,
),
);
}),
Expand Down Expand Up @@ -61,15 +62,16 @@ class MyApp extends StatelessWidget {
title: const Text(title),
),
body: GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
// Create a grid with 2 columns.
// If you change the scrollDirection to horizontal,
// this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List.
// 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.headlineSmall,
style: TextTheme.of(context).headlineSmall,
),
);
}),
Expand Down
58 changes: 29 additions & 29 deletions src/content/cookbook/testing/widget/orientation.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ orientation.

This recipe uses the following steps:

1. Create an app that updates the layout of the content, based on the
orientation.
1. Create an app that updates the layout of the content,
based on the orientation.
1. Create an orientation test group.
1. Create a portrait orientation test.
1. Create a landscape orientation test.
Expand All @@ -35,8 +35,8 @@ app is in portrait or landscape mode:
flutter create orientation_tests
```

2. Follow the steps in [Update the UI based on orientation][] to set up the
project.
2. Follow the steps in [Update the UI based on orientation][] to
set up the project.

## 2. Create an orientation test group

Expand All @@ -46,23 +46,24 @@ group your future orientation tests:
1. In your Flutter project, open `test/widget_test.dart`.
1. Replace the existing contents with the following:

<?code-excerpt "cookbook/testing/widget/orientation_tests/test/widget_test.dart (scaffolding)"?>
```dart title="widget_test.dart"
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:orientation_tests/main.dart';

void main() {
group('Orientation', () {
...
// ···
});
}
```

## 3. Create a portrait orientation test

Add the portrait orientation test to the `Orientation` group. This test makes
sure that the orientation is `portrait` and that only `2` columns of data
appear in the app:
Add the portrait orientation test to the `Orientation` group.
This test makes sure that the orientation is `portrait` and that
only `2` columns of data appear in the app:

1. In `test/widget_test.dart`, replace `...` inside of the `Orientation` group
with the following test:
Expand All @@ -83,25 +84,25 @@ appear in the app:
await tester.pump();
// Verify initial orientation is portrait.
Orientation orientation =
final 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 =
final gridView = tester.widget<GridView>(gridViewFinder);
final delegate =
gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
expect(delegate.crossAxisCount, 2);
});
```

## 4. Create a landscape orientation test

Add the landscape orientation test to the `Orientation` group. This test makes
sure that the orientation is `landscape` and that only `3` columns of data
appear in the app:
Add the landscape orientation test to the `Orientation` group.
This test makes sure that the orientation is `landscape` and that
only `3` columns of data appear in the app:

1. In `test/widget_test.dart`, inside of the `Orientation` group,
add the following test after the landscape test:
Expand All @@ -122,15 +123,15 @@ appear in the app:
await tester.pump();
// Verify initial orientation is landscape.
Orientation orientation =
final 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 =
final gridView = tester.widget<GridView>(gridViewFinder);
final delegate =
gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
expect(delegate.crossAxisCount, 3);
});
Expand All @@ -148,7 +149,6 @@ flutter test test/widget_test.dart

<?code-excerpt "cookbook/testing/widget/orientation_tests/test/widget_test.dart"?>
```dart title="widget_test.dart"
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:orientation_tests/main.dart';
Expand All @@ -169,15 +169,15 @@ void main() {
await tester.pump();
// Verify initial orientation is portrait.
Orientation orientation =
final 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 =
final gridView = tester.widget<GridView>(gridViewFinder);
final delegate =
gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
expect(delegate.crossAxisCount, 2);
});
Expand All @@ -196,15 +196,15 @@ void main() {
await tester.pump();
// Verify initial orientation is landscape.
Orientation orientation =
final 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 =
final gridView = tester.widget<GridView>(gridViewFinder);
final delegate =
gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
expect(delegate.crossAxisCount, 3);
});
Expand Down Expand Up @@ -248,15 +248,15 @@ class OrientationList extends StatelessWidget {
body: OrientationBuilder(
builder: (context, orientation) {
return GridView.count(
// Create a grid with 2 columns in portrait mode, or 3 columns in
// landscape mode.
// 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.
// 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,
style: TextTheme.of(context).displayLarge,
),
);
}),
Expand Down

0 comments on commit 7f1a604

Please sign in to comment.