Обнаружение ориентации экрана во Flutter: подробное руководство

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

Метод 1: MediaQuery
Класс MediaQueryпредоставляет информацию об экране текущего устройства и его ограничениях. Чтобы проверить ориентацию экрана, вы можете использовать свойство MediaQuery.of(context).orientation. Вот пример:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var orientation = MediaQuery.of(context).orientation;
    print('Screen orientation: $orientation');
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Orientation Detection'),
        ),
        body: Container(
          child: Center(
            child: Text('Screen Orientation: $orientation'),
          ),
        ),
      ),
    );
  }
}

Метод 2: OrientationBuilder
Виджет OrientationBuilderперестраивается каждый раз при изменении ориентации экрана. Он предоставляет текущую ориентацию в качестве параметра своей функции-строителя. Вот пример:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Orientation Detection'),
        ),
        body: OrientationBuilder(
          builder: (context, orientation) {
            print('Screen orientation: $orientation');
            return Container(
              child: Center(
                child: Text('Screen Orientation: $orientation'),
              ),
            );
          },
        ),
      ),
    );
  }
}

Метод 3: DeviceOrientation
Класс DeviceOrientationиз пакета package:flutter/services.dartпредоставляет информацию о текущей ориентации устройства. Вот пример того, как его использовать:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  DeviceOrientation _orientation;
  @override
  void initState() {
    super.initState();
    _getOrientation();
  }
  Future<void> _getOrientation() async {
    _orientation = await SystemChannels.platform.invokeMethod('SystemChrome.setPreferredOrientations');
    print('Screen orientation: $_orientation');
    setState(() {});
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Orientation Detection'),
        ),
        body: Container(
          child: Center(
            child: Text('Screen Orientation: $_orientation'),
          ),
        ),
      ),
    );
  }
}

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