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

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

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;
    final double screenWidth = screenSize.width;
    final double screenHeight = screenSize.height;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Display Size Example'),
        ),
        body: Center(
          child: Text(
            'Screen Width: $screenWidth\nScreen Height: $screenHeight',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}

В этом примере мы используем свойство MediaQuery.of(context).sizeдля получения размера экрана. Полученный объект Sizeсодержит ширину и высоту экрана, которые мы затем можем использовать в нашем приложении.

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

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('Display Size Example'),
        ),
        body: OrientationBuilder(
          builder: (BuildContext context, Orientation orientation) {
            final Size screenSize = MediaQuery.of(context).size;
            final double screenWidth = screenSize.width;
            final double screenHeight = screenSize.height;
            return Center(
              child: Text(
                'Screen Width: $screenWidth\nScreen Height: $screenHeight\nOrientation: $orientation',
                style: TextStyle(fontSize: 20),
              ),
            );
          },
        ),
      ),
    );
  }
}

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

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

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    final Size screenSize = WidgetsBinding.instance.window.physicalSize;
    final double screenWidth = screenSize.width;
    final double screenHeight = screenSize.height;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Display Size Example'),
        ),
        body: Center(
          child: Text(
            'Screen Width: $screenWidth\nScreen Height: $screenHeight',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}

В этом примере мы получаем доступ к размеру дисплея, используя WidgetsBinding.instance.window.physicalSize. Обратите внимание, что мы также используем SystemChrome.setEnabledSystemUIOverlays([])для удаления системных наложений (строки состояния, панели навигации) для полноэкранного отображения.

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