diff --git a/examples/cookbook/design/orientation/lib/main.dart b/examples/cookbook/design/orientation/lib/main.dart index 9169584dcf..abc4df710d 100644 --- a/examples/cookbook/design/orientation/lib/main.dart +++ b/examples/cookbook/design/orientation/lib/main.dart @@ -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, ), ); }), diff --git a/examples/cookbook/lists/grid_lists/lib/main.dart b/examples/cookbook/lists/grid_lists/lib/main.dart index 6f4e28c54e..4952ddd39c 100644 --- a/examples/cookbook/lists/grid_lists/lib/main.dart +++ b/examples/cookbook/lists/grid_lists/lib/main.dart @@ -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, ), ); }), diff --git a/examples/cookbook/testing/widget/orientation_tests/lib/main.dart b/examples/cookbook/testing/widget/orientation_tests/lib/main.dart index 9169584dcf..abc4df710d 100644 --- a/examples/cookbook/testing/widget/orientation_tests/lib/main.dart +++ b/examples/cookbook/testing/widget/orientation_tests/lib/main.dart @@ -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, ), ); }), diff --git a/examples/cookbook/testing/widget/orientation_tests/test/widget_test.dart b/examples/cookbook/testing/widget/orientation_tests/test/widget_test.dart index f0e2aadd04..a640fee71d 100644 --- a/examples/cookbook/testing/widget/orientation_tests/test/widget_test.dart +++ b/examples/cookbook/testing/widget/orientation_tests/test/widget_test.dart @@ -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 { @@ -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(gridViewFinder); - SliverGridDelegateWithFixedCrossAxisCount delegate = + final gridView = tester.widget(gridViewFinder); + final delegate = gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount; expect(delegate.crossAxisCount, 2); }); @@ -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(gridViewFinder); - SliverGridDelegateWithFixedCrossAxisCount delegate = + final gridView = tester.widget(gridViewFinder); + final delegate = gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount; expect(delegate.crossAxisCount, 3); }); // #enddocregion landscape-mode-test + // #docregion scaffolding }); } -// #enddocregion OrientationWidgetTest +// #enddocregion scaffolding diff --git a/src/content/cookbook/design/orientation.md b/src/content/cookbook/design/orientation.md index d626a2b75a..15ccca6207 100644 --- a/src/content/cookbook/design/orientation.md +++ b/src/content/cookbook/design/orientation.md @@ -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, ), ); }), diff --git a/src/content/cookbook/lists/grid-lists.md b/src/content/cookbook/lists/grid-lists.md index 860512bbc6..31dbd797c0 100644 --- a/src/content/cookbook/lists/grid-lists.md +++ b/src/content/cookbook/lists/grid-lists.md @@ -22,15 +22,16 @@ generate a list of 100 widgets that display their index in the list. ```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, ), ); }), @@ -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, ), ); }), diff --git a/src/content/cookbook/testing/widget/orientation.md b/src/content/cookbook/testing/widget/orientation.md index e3a9160c11..c455b6902c 100644 --- a/src/content/cookbook/testing/widget/orientation.md +++ b/src/content/cookbook/testing/widget/orientation.md @@ -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. @@ -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 @@ -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: + ```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: @@ -83,15 +84,15 @@ 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(gridViewFinder); - SliverGridDelegateWithFixedCrossAxisCount delegate = + final gridView = tester.widget(gridViewFinder); + final delegate = gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount; expect(delegate.crossAxisCount, 2); }); @@ -99,9 +100,9 @@ appear in the app: ## 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: @@ -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(gridViewFinder); - SliverGridDelegateWithFixedCrossAxisCount delegate = + final gridView = tester.widget(gridViewFinder); + final delegate = gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount; expect(delegate.crossAxisCount, 3); }); @@ -148,7 +149,6 @@ flutter test 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'; @@ -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(gridViewFinder); - SliverGridDelegateWithFixedCrossAxisCount delegate = + final gridView = tester.widget(gridViewFinder); + final delegate = gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount; expect(delegate.crossAxisCount, 2); }); @@ -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(gridViewFinder); - SliverGridDelegateWithFixedCrossAxisCount delegate = + final gridView = tester.widget(gridViewFinder); + final delegate = gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount; expect(delegate.crossAxisCount, 3); }); @@ -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, ), ); }),