Flutter : Comment définir et verrouiller l'orientation de l'écran à la demande

Question

Sur l'une de mes pages flutter, j'ai besoin que l'écran soit en mode paysage et verrouillé afin qu'il ne puisse pas basculer en mode portrait, mais seulement sur cette page. J'ai donc besoin d'une façon d'activer cette fonction en temps réel. Quelqu'un sait-il comment faire?

Je voudrais qu'il tourne en mode paysage-gauche ou paysage-droit, mais pas en mode portrait.

Answer 1

Tout d'abord, importez le package des services :

import 'package:flutter/services.dart';

Cela vous donnera accès à la classe SystemChrome, qui "contrôle des aspects spécifiques de l'interface graphique du système d'exploitation et de la manière dont elle interagit avec l'application."

Lorsque vous chargez le Widget, faites quelque chose comme ceci :

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

puis lorsque je quitte la page, remettez-le à la normale comme ceci :

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

Answer 2

Je utiliserai un simple mixin pour verrouiller le téléphone en mode portrait. La solution suivante verrouille l'application entière en mode portrait ou définit des écrans spécifiques en mode portrait tout en permettant la rotation ailleurs.

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

/// Force le mode portrait uniquement dans toute l'application
/// Utilisez ce Mixin sur le widget d'application principal, par exemple app.dart
/// L''App' de Flutter doit étendre le Stateless widget.
///
/// Appelez `super.build(context)` dans la méthode build() principale
/// pour activer le mode portrait uniquement
mixin PortraitModeMixin on StatelessWidget {
  @override
  Widget build(BuildContext context) {
    _portraitModeOnly();
    return null;
  }
}

/// Force le mode portrait uniquement sur un écran spécifique
/// Utilisez ce Mixin sur l'écran spécifique que vous souhaitez
/// bloquer en mode portrait uniquement.
///
/// Appelez `super.build(context)` dans la méthode build() de l'état
/// et `super.dispose();` dans la méthode dispose() de l'état
mixin PortraitStatefulModeMixin on State {
  @override
  Widget build(BuildContext context) {
    _portraitModeOnly();
    return null;
  }

  @override
  void dispose() {
    _enableRotation();
  }
}

/// bloque la rotation; défini l'orientation en : portrait
void _portraitModeOnly() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
}

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

Pour bloquer la rotation dans toute l'application, implémentez PortraitModeMixin dans le widget App principal. N'oubliez pas d'appeler super.build(context) dans la méthode build(BuildContext context).

/// Widget App principal
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("Exemple de blocage de rotation d'écran"),
    );
  }
}

Pour bloquer la rotation dans un écran spécifique, implémentez PortraitStatefulModeMixin dans l'état de l'écran spécifique. N'oubliez pas d'appeler super.build(context) dans la méthode build() de l'état et super.dispose() dans la méthode dispose(). Si votre écran est un StatelessWidget - répétez simplement la solution de l'App (exemple précédent) c'est-à-dire utilisez PortraitModeMixin.

/// Écran spécifique
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 - Exemple de blocage de rotation d'écran");
  }

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

Les mixins avec une telle syntaxe fonctionnent à partir de Dart 2.1

Answer 3

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

Answer 4

Tout d'abord, verrouillez l'orientation de l'application en mode Portrait.

//Faites ceci dans main.dart
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
  .then((_) {
runApp(MyApp());
});

Deuxièmement, allez à l'écran spécifique où vous souhaitez changer l'orientation.

@override
void initState() {
super.initState();

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

}

@override
void dispose() {
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
_interstitialAd.dispose();
super.dispose();
}

Pour utiliser SystemChrome, vous devrez ajouter 'package:flutter/services.dart'

Answer 5

Parfois, cela peut ne pas fonctionner en raison d'informations nulles sur l'orientation. Vous pouvez l'utiliser simplement comme ceci:

import services.dart

void main() {
    SystemChrome.setPreferredOrientations(
    [DeviceOrientation.portraitUp]
     )
        .then((_) {
          runApp(new MyApp());
        });
    }

// attendre l'orientation de l'écran de réglage après avoir initié l'application et -> puis verrouiller l'orientation