Простые способы зафиксировать ориентацию флаттер-страницы: держите приложение в правильном положении!

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

Метод 1: использование SystemChrome
Класс SystemChrome во Flutter предоставляет способ управления поведением на уровне системы, включая ориентацию. Вызвав метод SystemChrome.setPreferredOrientations, вы можете указать разрешенные ориентации вашей страницы. Вот пример:

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

Этот фрагмент кода фиксирует портретную ориентацию, позволяя отображать приложение только в вертикальном положении.

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

OrientationBuilder(
  builder: (context, orientation) {
    if (orientation == Orientation.portrait) {
      return PortraitPage();
    } else {
      return LandscapePage();
    }
  },
)

В этом примере виджет PortraitPageотображается, когда устройство находится в портретном режиме, а виджет LandscapePageотображается, когда устройство находится в альбомном режиме.

В этом примере виджет PortraitPageотображается, когда устройство находится в портретном режиме.

Метод 3: использование пакета Flutter ScreenUtils
Третий вариант — использовать сторонний пакет, например flutter_screenutil. Он обеспечивает простой способ обработки экранов разных размеров и ориентаций. Вы можете заблокировать ориентацию, задав свойства allowOnlyPortraitModeили allowOnlyLandscapeMode. Вот пример:

import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  ScreenUtil.init();
  ScreenUtil().allowOnlyPortraitMode(); // or allowOnlyLandscapeMode()
  runApp(MyApp());
}

Используя пакет flutter_screenutil, вы можете легко зафиксировать книжную или альбомную ориентацию.

Контроль ориентации страницы Flutter необходим для обеспечения единообразного взаимодействия с пользователем. В этой статье мы рассмотрели три метода достижения этой цели: использование SystemChrome, использование OrientationBuilderи использование пакета flutter_screenutil. Не стесняйтесь выбирать метод, который лучше всего соответствует вашим потребностям, и держите свое приложение в правильном положении!