Flutter: orientación de la interfaz de usuario

Todas las aplicaciones deberían poder ajustar su interfaz de usuario (UI) según la orientación del teléfono. Por orientación, implicamos el modo vertical y horizontal en los teléfonos inteligentes en lugar de la orientación física. En Flutter, se hace usando OrientationBuilder, que determina la orientación actual de la aplicación . Analizaremos lo mismo creando una aplicación simple, cambiaremos su orientación y mostraremos los cambios en la interfaz de usuario.

Siga los pasos a continuación para crear la aplicación que cambia la interfaz de usuario según la orientación del teléfono:

• Crear un GridView de 3 columnas
• Utilice OrientationBuilder para modificar el número de columnas.

Vamos a discutirlos en detalle.

Crear un GridView:

Para crear un GridView de 3 columnas, use el código como se muestra a continuación:

GridView.count(
  crossAxisCount: 3,
);

Uso de OrientationBuilder:

Como se discutió anteriormente, la orientaciónBuilder determina la orientación de la aplicación actual. Diseñaremos el Orientationbuilder de tal manera que muestre 3 columnas en modo vertical y 4 columnas en modo horizontal. para hacerlo, siga el siguiente código:

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      crossAxisCount: orientation == Orientation.portrait ? 3 : 4,
    );
  },
);

El código completo se vería a continuación:

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'GeeksForGeeks';
  
    return MaterialApp(
      title: appTitle,
      home: OrientationList(
        title: appTitle,
      ),
    );
  }
}
  
class OrientationList extends StatelessWidget {
  final String title;
  
  OrientationList({Key key, this.title}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text(title),
          backgroundColor: Colors.green),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
             
            //grid with 3 and 4 columns for portrait and landscape mode respectively
            crossAxisCount: orientation == Orientation.portrait ? 3 : 4,
              
            // random item generator
            children: List.generate(100, (index) {
              return Center(
                child: Text(
                  'A $index',
                  style: Theme.of(context).textTheme.headline4,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}

Producción: