Изучение различных методов реализации только портретной ориентации во Flutter

В мире разработки мобильных приложений нередко встречаются ситуации, когда приложению требуется определенная ориентация, например только портретная. Flutter, популярная кроссплатформенная платформа, предоставляет несколько методов реализации только портретной ориентации в вашем приложении. В этой статье мы рассмотрим различные методы и примеры кода, которые помогут вам легко выполнить это требование.

  1. Блокировка ориентации с помощью SystemChrome:
    Flutter предоставляет класс SystemChrome, который позволяет настраивать параметры пользовательского интерфейса на системном уровне. С помощью SystemChrome.setPreferredOrientationsвы можете заблокировать только портретную ориентацию приложения. Вот пример:
import 'package:flutter/services.dart';
void main() {
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) {
    runApp(MyApp());
  });
}
  1. Использование OrientationBuilder:
    Виджет OrientationBuilderво Flutter — это мощный инструмент, который перестраивает свой дочерний виджет при каждом изменении ориентации устройства. Вы можете использовать этот виджет для обеспечения только книжной ориентации. Вот пример:
import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: OrientationBuilder(
        builder: (context, orientation) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Portrait-Only App'),
            ),
            body: Container(
              child: Text('Your app content here'),
            ),
          );
        },
      ),
    ),
  );
}
  1. Использование DeviceOrientation:
    Вы также можете использовать пакет device_infoво Flutter, чтобы получить текущую ориентацию устройства и соответствующим образом перестроить пользовательский интерфейс. Вот пример:
import 'package:flutter/material.dart';
import 'package:device_info/device_info.dart';
void main() {
  runApp(
    MaterialApp(
      home: DeviceOrientationWidget(),
    ),
  );
}
class DeviceOrientationWidget extends StatefulWidget {
  @override
  _DeviceOrientationWidgetState createState() => _DeviceOrientationWidgetState();
}
class _DeviceOrientationWidgetState extends State<DeviceOrientationWidget> {
  final DeviceInfoPlugin deviceInfoPlugin = DeviceInfoPlugin();
  Orientation currentOrientation = Orientation.portrait;
  @override
  void initState() {
    super.initState();
    _getOrientation();
  }
  void _getOrientation() async {
    var orientation;
    if (Theme.of(context).platform == TargetPlatform.iOS) {
      orientation = await deviceInfoPlugin.iosInfo;
    } else {
      orientation = await deviceInfoPlugin.androidInfo;
    }
    setState(() {
      currentOrientation = orientation.orientation;
    });
  }
  @override
  Widget build(BuildContext context) {
    if (currentOrientation == Orientation.portrait) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Portrait-Only App'),
        ),
        body: Container(
          child: Text('Your app content here'),
        ),
      );
    } else {
      // Handle landscape orientation
      return Scaffold(
        body: Container(
          child: Center(
            child: Text('This app only supports portrait mode.'),
          ),
        ),
      );
    }
  }
}

В этой статье мы рассмотрели несколько методов реализации только книжной ориентации во Flutter. Мы рассмотрели такие методы, как блокировка ориентации приложения с помощью SystemChrome, использование OrientationBuilderи динамическая настройка пользовательского интерфейса в зависимости от ориентации устройства с помощью пакета device_info.. Применяя эти методы, вы можете обеспечить единообразный пользовательский интерфейс и дизайн вашего мобильного приложения Flutter.