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

Метод 1. Блокировка ориентации устройства
Самый простой способ обеспечить только книжную ориентацию — заблокировать ориентацию устройства программно. Flutter предоставляет класс SystemChrome, который позволяет вам управлять настройками системного уровня, включая ориентацию устройства. В следующем фрагменте кода показано, как зафиксировать портретную ориентацию:

import 'package:flutter/services.dart';
void main() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  runApp(MyApp());
}

Метод 2: использование виджета OrientationBuilder
Виджет OrientationBuilderво Flutter помогает создавать адаптивные макеты в зависимости от ориентации устройства. Обернув код пользовательского интерфейса в OrientationBuilder, вы можете условно отображать различные компоненты пользовательского интерфейса для книжной и альбомной ориентации. Вот пример:

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: OrientationBuilder(
          builder: (context, orientation) {
            return orientation == Orientation.portrait
                ? buildPortraitLayout()
                : buildLandscapeLayout();
          },
        ),
      ),
    ),
  );
}
Widget buildPortraitLayout() {
  // Build your portrait UI here
  return Container();
}
Widget buildLandscapeLayout() {
  // Build your landscape UI here
  return Container();
}

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

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Builder(
          builder: (context) {
            final orientation = MediaQuery.of(context).orientation;
            return orientation == Orientation.portrait
                ? buildPortraitLayout()
                : buildLandscapeLayout();
          },
        ),
      ),
    ),
  );
}
Widget buildPortraitLayout() {
  // Build your portrait UI here
  return Container();
}
Widget buildLandscapeLayout() {
  // Build your landscape UI here
  return Container();
}

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

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