Probar la orientación

En Flutter, puedes construir diferentes diseños dependiendo de una orientación dada. Por ejemplo, podrías presentar datos en dos columnas si la aplicación está en modo portrait, y tres columnas si está en modo landscape. Además, puedes crear pruebas que verifiquen si se muestra el número correcto de columnas para cada orientación.

En esta receta, aprenderás cómo verificar si la orientación de una aplicación es portrait o landscape, y también cuántas columnas se muestran para cada orientación.

Esta receta utiliza los siguientes pasos:

1. Crea una aplicación que actualice el diseño del contenido, basándose en la orientación.
2. Crea un grupo de pruebas de orientación.
3. Crea una prueba de orientación vertical (portrait).
4. Crea una prueba de orientación horizontal (landscape).
5. Ejecuta las pruebas.

Crea una aplicación Flutter que cambie el número de columnas que se muestran cuando una aplicación está en modo portrait o landscape:

1. Crea un nuevo proyecto Flutter llamado orientation_tests.

   flutter create orientation_tests
   

   content_copy

2. Sigue los pasos en Actualizar la interfaz de usuario según la orientación para configurar el proyecto.

Después de configurar tu proyecto orientation_tests, completa estos pasos para agrupar tus futuras pruebas de orientación:

1. En tu proyecto Flutter, abre test/widget_test.dart.

2. Reemplaza el contenido existente por el siguiente:

   widget_test.dart

   dart

   import 'package:flutter/material.dart';
   import 'package:flutter_test/flutter_test.dart';
   import 'package:orientation_tests/main.dart';
   ​
   void main() {
     group('Orientation', () {
       // ···
     });
   }
   

   content_copy

Añade la prueba de orientación portrait al grupo Orientation. Esta prueba se asegura de que la orientación sea portrait y de que solo aparezcan 2 columnas de datos en la aplicación:

1. En test/widget_test.dart, reemplaza ... dentro del Orientation grupo con la siguiente prueba:

   widget_test.dart

   dart

   // 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.
     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);
     final gridView = tester.widget<GridView>(gridViewFinder);
     final delegate =
         gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
     expect(delegate.crossAxisCount, 2);
   });
   

   content_copy

Añade la prueba de orientación landscape al grupo Orientation. Esta prueba se asegura de que la orientación sea landscape y de que solo aparezcan 3 columnas de datos en la aplicación:

1. En test/widget_test.dart, dentro del grupo Orientation, añade la siguiente prueba después de la prueba landscape:

   widget_test.dart

   dart

   // 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.
     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);
     final gridView = tester.widget<GridView>(gridViewFinder);
     final delegate =
         gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
     expect(delegate.crossAxisCount, 3);
   });
   

   content_copy

Ejecuta las pruebas usando el siguiente comando desde la raíz del proyecto:

flutter test test/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', () {
    // 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.
      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);
      final gridView = tester.widget<GridView>(gridViewFinder);
      final delegate =
          gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
      expect(delegate.crossAxisCount, 2);
    });
​
    // 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.
      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);
      final gridView = tester.widget<GridView>(gridViewFinder);
      final delegate =
          gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
      expect(delegate.crossAxisCount, 3);
    });
  });
}

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: TextTheme.of(context).headlineLarge,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}