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

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

double screenHeight = MediaQuery.of(context).size.height;
double percentage = screenHeight * 0.5; // 50% of device height

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

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    double screenHeight = constraints.maxHeight;
    double percentage = screenHeight * 0.25; // 25% of device height
    // Use the calculated percentage in your UI layout
    return Container(
      height: percentage,
      // Other widget properties
    );
  },
)

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

import 'package:flutter_screenutil/flutter_screenutil.dart';
double screenHeight = ScreenUtil().screenHeight;
double percentage = screenHeight * 0.75; // 75% of device height

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

import 'package:sizer/sizer.dart';
double screenHeight = SizerUtil.orientation == Orientation.portrait
    ? SizerUtil.deviceHeight
    : SizerUtil.deviceWidth;
double percentage = screenHeight * 0.3; // 30% of device height

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