Flutter: gestión de la orientación del dispositivo

Todas las aplicaciones que los desarrolladores crean en flutter se ejecutan en múltiples dispositivos con una variedad de píxeles y tamaños de pantalla. Administrar la orientación de la pantalla en flutter juega un papel importante en el establecimiento de una aplicación exitosa que se ejecuta en múltiples dispositivos. En flutter, puede elegir la mejor manera de lidiar con tales desafíos de orientación del dispositivo de una manera fácil y práctica. En este artículo, lo guiaremos a través de la orientación de la pantalla en Flutter. 

¿Cuál es la necesidad de orientación?

Para aprender la gestión de la orientación, primero, debe comprender la necesidad de hacerlo. La gestión de la orientación de la pantalla mejora en gran medida la experiencia del usuario. Cuando cambia la orientación de la pantalla, la acción que se ejecuta actualmente sobre la aplicación cambia y se reconstruye de acuerdo con la nueva orientación. Por ejemplo, cambiar la orientación al modo horizontal mientras juega un juego de carreras de autos.

¿Cómo configurar la orientación del dispositivo?

Flutter proporciona a saber, 2 formas de orientar el dispositivo, a saber:

1. Retrato
2. Paisaje 

A continuación se muestran los pasos ilustrados para cambiar la orientación de su aplicación móvil de acuerdo con su idoneidad.

Paso 1 : Incluya los paquetes de servicios en su archivo principal. 

 

Paso 2 : Llame al método » WidgetsFlutterBinding.ensureInitialized() » después de la llamada a la función principal.

 

Paso 3 : Llame a » SystemChrome.setPreferredOrientations » después de usar el método » WidgetsFlutterBinding.ensureInitialized() «.

 

Ahora, para establecer un modo de retrato, flutter ofrece dos opciones de orientación, a saber:

• Orientación del dispositivo.retratoUp,
• Orientación del dispositivo.retrato abajo,

 

Código de muestra

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);

  runApp(HomeApp());
}

Para configurar el modo horizontal, Flutter ofrece dos opciones de orientación:

• DeviceOrientation.landscapeLeft 
• DeviceOrientation.landscapeRight

 

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight
  ]);

  runApp(HomeApp());
}

¿Cómo administrar la orientación del dispositivo?

Paso 1: 

Abra la pantalla en la que desea administrar la orientación.

Paso 2: 

Agregue un método init() y llame a SystemChrome.setPreferredOrientations en el modo que desea aplicar.

Paso 3:

Agregue un método dispose() y llame a SystemChrome . setPreferredOrientations en el modo que desea eliminar.

Veamos los pasos de cerca con la ayuda de ejemplos.

Ejemplo 1: para establecer la orientación del dispositivo en modo horizontal

import 'package:flutter/material.dart';
 
import 'package:flutter/services.dart';
 
void main() {
  runApp(HomeApp());
}
 
class HomeApp extends StatefulWidget {
  HomeApp({Key? key}) : super(key: key);
 
  @override
  State<HomeApp> createState() => _HomeAppState();
}
 
class _HomeAppState extends State<HomeApp> {
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }
 
  @override
  dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }
 
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}
 
class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: ElevatedButton(
          child: Text('Click here'),
          style: OutlinedButton.styleFrom(
              backgroundColor: Colors.green,
              primary: Colors.black,
              textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.normal),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)))),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),
      ),
    );
  }
}
 
class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);
 
  @override
  State<NewScreen> createState() => _NewScreenState();
}
 
class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();
 
  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(child: Text('You shifted to Landscape mode')),
    );
  }
}

Producción:

Ejemplo 2: para establecer la orientación del dispositivo en modo vertical

import 'package:flutter/material.dart';
 
import 'package:flutter/services.dart';
 
void main() {
   runApp(HomeApp());
}
 
class HomeApp extends StatefulWidget {
  HomeApp({Key? key}) : super(key: key);
 
  @override
  State<HomeApp> createState() => _HomeAppState();
}
 
class _HomeAppState extends State<HomeApp> {
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
  }
 
  @override
  dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);
    super.dispose();
  }
 
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}
 
class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: ElevatedButton(
          child: Text('Click here'),
          style: OutlinedButton.styleFrom(
              backgroundColor: Colors.green,
              primary: Colors.black,
              textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.normal),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)))),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),
      ),
    );
  }
}
 
class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);
 
  @override
  State<NewScreen> createState() => _NewScreenState();
}
 
class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();
 
  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(child: Text('You shifted to landscape mode')),
    );
  }
}

Producción: