Во 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
, вы можете легко получить информацию об ориентации и соответствующим образом адаптировать пользовательский интерфейс вашего приложения. Не забывайте учитывать изменения ориентации при разработке приложения, чтобы обеспечить удобство взаимодействия с пользователем.