Flutter: cómo configurar y bloquear la orientación de la pantalla a pedido

Hacemos una revisión profunda cada tutorial en nuestra página web con el objetivo de mostrarte en todo momento la información más veraz y actualizada.

Solución:

Primero importe el paquete de servicios:

import 'package:flutter/services.dart';

Esto le dará acceso a la SystemChrome clase, que "Controls specific aspects of the operating system's graphical interface and how it interacts with the application."

Cuando cargue el Widget, haga algo como esto:

@override
void initState()
  super.initState();
  SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
  ]);

luego, cuando salgo de la página, la devuelvo a la normalidad así:

@override
dispose()
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  super.dispose();

Yo usaría un simple mezclando a bloquear teléfono en vertical. La siguiente solución bloquea el toda la aplicación en vertical o establece pantallas específicas a retrato mientras mantiene la rotación en otros lugares.

import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';

/// Forces portrait-only mode application-wide
/// Use this Mixin on the main app widget i.e. app.dart
/// Flutter's 'App' has to extend Stateless widget.
///
/// Call `super.build(context)` in the main build() method
/// to enable portrait only mode
mixin PortraitModeMixin on StatelessWidget 
  @override
  Widget build(BuildContext context) 
    _portraitModeOnly();
    return null;
  


/// Forces portrait-only mode on a specific screen
/// Use this Mixin in the specific screen you want to
/// block to portrait only mode.
///
/// Call `super.build(context)` in the State's build() method
/// and `super.dispose();` in the State's dispose() method
mixin PortraitStatefulModeMixin on State 
  @override
  Widget build(BuildContext context) 
    _portraitModeOnly();
    return null;
  

  @override
  void dispose() 
    _enableRotation();
  


/// blocks rotation; sets orientation to: portrait
void _portraitModeOnly() 
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);


void _enableRotation() 
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);

A rotación de bloques en toda la aplicación implementar PortraitModeMixin en general App artilugio. Recuerda llamar super.build(context) en Widget build(BuildContext context) método.

/// Main App widget
class App extends StatelessWidget with PortraitModeMixin 
  const App();

  @override
  Widget build(BuildContext context) 
    super.build(context);
    return CupertinoApp(
      title: 'Flutter Demo',
      theme: CupertinoThemeData(),
      home: Text("Block screen rotation example"),
    );
  

A bloquear la rotación en una pantalla específica implementar PortraitStatefulModeMixin en el estado de la pantalla específica. Recuerda llamar super.build(context) en los Estados build() método y super.dispose() en dispose() método. Si tu pantalla es una Widget sin estado – simplemente repita la solución de la aplicación (ejemplo anterior), es decir, use PortraitModeMixin.

/// Specific screen
class SampleScreen extends StatefulWidget 
  SampleScreen() : super();

  @override
  State createState() => _SampleScreenState();


class _SampleScreenState extends State
    with PortraitStatefulModeMixin 
  @override
  Widget build(BuildContext context) 
    super.build(context);
    return Text("Flutter - Block screen rotation example");
  

  @override
  void dispose() 
     super.dispose();
  

Mixins con tal trabajo de sintaxis de Dart 2.1

void main() 
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
    .then((_) 
      runApp(new MyApp());
    );

Si te sientes a gusto, tienes el poder dejar un escrito acerca de qué te ha parecido este enunciado.

---

---

Utiliza Nuestro Buscador