Розмахування розміром екрану

Я створив нову програму на Flutter, і у мене виникли проблеми з розмірами екрану при перемиканні між різними пристроями.

Я створив додаток, використовуючи розмір екрану Pixel 2XL, і оскільки у мене є контейнери з дочірнім елементом ListView, він попросив мене вказати висоту та ширину контейнера.

Отже, коли я перемикаю пристрій на новий, контейнер занадто довгий і видає помилку.

Як я можу зробити так, щоб програма була оптимізована для всіх екранів?

Ви можете використовувати:

• double width = MediaQuery.of(context).size.width;
• double height = MediaQuery.of(context).size.height;

Щоб отримати висоту лише SafeArea (для iOS 11 і новіших версій ):

• var padding = MediaQuery.of(context).padding;
• double newheight = height - padding.top - padding.bottom;

Отримати widthце просто, але heightможе бути складно , наступні способи боротьби з нимиheight

// Full screen width and height
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

// Height (without SafeArea)
var padding = MediaQuery.of(context).padding;
double height1 = height - padding.top - padding.bottom;

// Height (without status bar)
double height2 = height - padding.top;

// Height (without status and toolbar)
double height3 = height - padding.top - kToolbarHeight;

Наведений нижче код іноді не відображає правильний розмір екрану:

MediaQuery.of(context).size

Я тестував на SAMSUNG SM-T580, який повертається {width: 685.7, height: 1097.1}замість реальної роздільної здатності 1920x1080.

Будь ласка, використовуйте:

import 'dart:ui';

window.physicalSize;

MediaQuery.of(context).size.widthі MediaQuery.of(context).size.heightчудово працює, але кожен раз потрібно писати вирази типу width / 20, щоб встановити певну висоту ширини.

Я створив нову програму на Flutter, і у мене виникли проблеми з розмірами екрану при перемиканні між різними пристроями.

Так, доступний flutter_screenutil плагін для адаптації розміру екрана та шрифту. Нехай ваш інтерфейс відображає розумний макет на різних розмірах екрана!

Використання:

Додати залежність:

Будь ласка, перевірте останню версію перед встановленням.

dependencies:
  flutter:
    sdk: flutter
  # add flutter_ScreenUtil
  flutter_screenutil: ^0.4.2

Додайте наступні імпорти до свого коду Dart:

import 'package:flutter_screenutil/flutter_screenutil.dart';

Ініціалізуйте та встановіть масштаб розміру та розмір шрифту відповідно до опції доступності системи "Розмір шрифту"

//fill in the screen size of the device in the design

//default value : width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil()..init(context);

//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//If you wang to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

Використання:

//for example:
//rectangle
Container(
           width: ScreenUtil().setWidth(375),
           height: ScreenUtil().setHeight(200),
           ...
            ),

////If you want to display a square:
Container(
           width: ScreenUtil().setWidth(300),
           height: ScreenUtil().setWidth(300),
            ),

Будь ласка, зверніться до оновленої документації для отримання детальної інформації

Примітка: Я протестував і використовую цей плагін, який дійсно чудово працює з усіма пристроями, включаючи iPad

Сподіваюся, ця воля комусь допоможе

Гей, ти можеш використовувати цей клас, щоб отримати ширину та висоту екрану у відсотках

import 'package:flutter/material.dart';
class Responsive{
  static width(double p,BuildContext context)
  {
    return MediaQuery.of(context).size.width*(p/100);
  }
  static height(double p,BuildContext context)
  {
    return MediaQuery.of(context).size.height*(p/100);
  }
}

і використовувати так

Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);

Як отримати доступ до розміру екрана або щільності пікселів або співвідношення сторін у мерехтінні?

За допомогою MediaQuery ми можемо отримати доступ до розміру екрана та інших, таких як щільність пікселів, співвідношення сторін тощо.

syntex: MediaQuery.of (context) .size.height

Просто оголосіть функцію

Size screenSize() {
return MediaQuery.of(context).size;
}

Використовуйте, як показано нижче

return Container(
      width: screenSize().width,
      height: screenSize().height,
      child: ...
 )

Ми помітили, що використання MediaQueryкласу може бути трохи громіздким, і в ньому також бракує пари ключових відомостей.

Тут ми маємо невеликий клас помічника екрану, який ми використовуємо у всіх наших нових проектах:

class Screen {
  static double get _ppi => (Platform.isAndroid || Platform.isIOS)? 150 : 96;
  static bool isLandscape(BuildContext c) => MediaQuery.of(c).orientation == Orientation.landscape;
  //PIXELS
  static Size size(BuildContext c) => MediaQuery.of(c).size;
  static double width(BuildContext c) => size(c).width;
  static double height(BuildContext c) => size(c).height;
  static double diagonal(BuildContext c) {
    Size s = size(c);
    return sqrt((s.width * s.width) + (s.height * s.height));
  }
  //INCHES
  static Size inches(BuildContext c) {
    Size pxSize = size(c);
    return Size(pxSize.width / _ppi, pxSize.height/ _ppi);
  }
  static double widthInches(BuildContext c) => inches(c).width;
  static double heightInches(BuildContext c) => inches(c).height;
  static double diagonalInches(BuildContext c) => diagonal(c) / _ppi;
}

Використовувати

bool isLandscape = Screen.isLandscape(context)
bool isLargePhone = Screen.diagonal(context) > 720;
bool isTablet = Screen.diagonalInches(context) >= 7;
bool isNarrow = Screen.widthInches(context) < 3.5;

Докладніше див .: https://blog.gskinner.com/archives/2020/03/flutter-simplify-platform-detection-responsive-sizing.html

За допомогою наступного методу ми можемо отримати фізичну висоту пристрою. Напр. 1080X1920

WidgetsBinding.instance.window.physicalSize.height
WidgetsBinding.instance.window.physicalSize.width