Actualizar la interfaz de usuario según la orientación

En algunas situaciones, quieres actualizar la visualización de una app cuando el formato del espacio disponible cambia, como cuando un usuario rota la pantalla de modo retrato a modo horizontal. Por ejemplo, la app podría mostrar un elemento tras otro en modo retrato, pero colocar esos mismos elementos lado a lado en modo horizontal. Puedes encontrar documentación detallada que cubre esto y más en la documentación de UI adaptativa.

En Flutter, puedes construir diferentes diseños dependiendo de una Orientation determinada. En este ejemplo, construye una lista que muestre dos columnas en modo retrato y tres columnas en modo horizontal utilizando los siguientes pasos:

1. Construye un GridView con dos columnas.
2. Usa un OrientationBuilder para cambiar el número de columnas.

Primero, crea una lista de elementos con los que trabajar. En lugar de usar una lista normal, crea una lista que muestre elementos en una cuadrícula. Por ahora, crea una cuadrícula con dos columnas.

return GridView.count(
  // A list with 2 columns
  crossAxisCount: 2,
  // ...
);

Para aprender más sobre cómo trabajar con GridViews, consulta la receta Crear una lista en cuadrícula.

Para determinar la Orientation actual de la app, usa el Widget OrientationBuilder. El OrientationBuilder calcula la Orientation actual al comparar el ancho y el alto disponibles para el Widget padre, y se vuelve a construir (rebuild) cuando cambia el tamaño del padre.

Usando la Orientation, construye una lista que muestre dos columnas en modo retrato, o tres columnas en modo horizontal.

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,
    );
  },
),

En la sección anterior, aprendiste cómo adaptar la UI de la app a los cambios de orientación del dispositivo.

Flutter también te permite especificar las orientaciones que tu app soporta usando los valores de DeviceOrientation. Puedes ya sea:

• Bloquear la app a una sola orientación, como únicamente la posición portraitUp, o...
• Permitir múltiples orientaciones, como tanto portraitUp y portraitDown, pero no horizontal (landscape).

En el método main() de la aplicación, llama a SystemChrome.setPreferredOrientations() con la lista de orientaciones preferidas que tu app soporta.

Para bloquear el dispositivo a una sola orientación, puedes pasar una lista con un único elemento.

Para obtener una lista de todos los valores posibles, consulta DeviceOrientation.

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  runApp(const MyApp());
}