स्पंदन स्क्रीन का आकार

Question

मैंने स्पंदन पर एक नया एप्लिकेशन बनाया है, और विभिन्न उपकरणों के बीच स्विच करने पर मुझे स्क्रीन के आकार के साथ समस्याएं हुई हैं।

मैंने Pixel 2XL स्क्रीन आकार का उपयोग करके एप्लिकेशन बनाया है, और क्योंकि मेरे पास लिस्टव्यू के बच्चे के साथ कंटेनर हैं, इसने मुझे कंटेनर के लिए ऊंचाई और चौड़ाई शामिल करने के लिए कहा है।

इसलिए जब मैं डिवाइस को एक नए डिवाइस पर स्विच करता हूं तो कंटेनर बहुत लंबा होता है और एक त्रुटि फेंकता है।

मैं इसे बनाने के बारे में कैसे जा सकता हूं ताकि एप्लिकेशन सभी स्क्रीन के लिए अनुकूलित हो?

Comments

github.com/flutter/flutter/wiki/Creating-Responsive-Apps के कुछ शुरुआती बिंदु हैं, github.com/flutter/flutter/issues/6398 , stackoverflow.com/questions/4959027/…

— गुंटर ज़ोचबॉयर

> मेरे पास ListView के बच्चे के साथ कंटेनर हैं, इसने मुझे कंटेनर के लिए ऊंचाई और चौड़ाई शामिल करने के लिए कहा है। क्या आप स्पष्ट कर सकते हो? आप एक सूची दृश्य बना सकते हैं जो बस संपूर्ण स्थान लेता है। क्या आप अपना लेआउट साझा कर सकते हैं?

— अयिल

Answer 1

आप उपयोग कर सकते हैं:

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

सिर्फ सेफएयर की ऊंचाई पाने के लिए (iOS 11 और उससे ऊपर के लिए):

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

Comments

सुरक्षित क्षेत्र के बिना ऐप का आकार कैसे प्राप्त करें

— user7856586

Answer 2

प्राप्त 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;

Comments

महान! बस मुझे जो चाहिए था। पागल है कि मैं अपने विचारों को आकर्षित करने के लिए सुरक्षित क्षेत्र ऊंचाई की गणना करने के लिए छोड़ दिया। सोच रहा था कि ये सब करते समय क्या गलत हो रहा है! : डी चियर्स!

— रोहित TP

Answer 3

निम्न कोड कभी-कभी सही स्क्रीन आकार नहीं लौटाता है:

MediaQuery.of(context).size

मैंने सैमसंग SM-T580 पर परीक्षण किया, जो {width: 685.7, height: 1097.1}वास्तविक रिज़ॉल्यूशन के बजाय वापस आता है 1920x1080।

इस्तेमाल करें:

import 'dart:ui';

window.physicalSize;

Comments

MediaQuery.of(context).sizeरिटर्न तार्किक पिक्सल की तरह दिखता है । लेकिन उसी का उपयोग अन्य स्पंदन विगेट्स द्वारा किया जाएगा। तो सब में आप एक आनुपातिक नौकरशाही का आकार प्राप्त करेंगे कि अगर तुम क्या जरूरत है। यदि आपको डिवाइस के सटीक पिक्सेल मूल्य की आवश्यकता है, तो आप इस तरह से कुछ कर सकते हैं, उदाहरण के लिए चौड़ाई MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio:। मैंने अभी इस पर एक लेख लिखा है यदि अधिक लोग उसी के लिए देखेंगे: medium.com/tagmalogic/…

— Miha

Answer 4

MediaQuery.of(context).size.widthऔर MediaQuery.of(context).size.heightमहान काम करता है, लेकिन हर बार विशिष्ट ऊंचाई चौड़ाई निर्धारित करने के लिए चौड़ाई / 20 जैसे भाव लिखने की आवश्यकता होती है।

मैंने स्पंदन पर एक नया एप्लिकेशन बनाया है, और विभिन्न उपकरणों के बीच स्विच करने पर मुझे स्क्रीन के आकार के साथ समस्याएं हुई हैं।

हाँ, स्क्रीन और फ़ॉन्ट आकार बदलने के लिए उपलब्ध flutter_screenutil प्लगइन । अपने UI को विभिन्न स्क्रीन आकारों पर एक उचित लेआउट प्रदर्शित करें!

उपयोग:

निर्भरता जोड़ें ency

स्थापना से पहले नवीनतम संस्करण की जाँच करें।

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

अपने डार्ट कोड में निम्न आयात जोड़ें:

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 सहित सभी उपकरणों के साथ बहुत अच्छा काम करता है

आशा है कि यह किसी की मदद करेगा

Comments

यदि आप इस प्लगइन का उपयोग करते हैं, तो इसका मतलब है कि आप उदाहरण के लिए केवल 1 चौड़ाई और ऊंचाई को परिभाषित कर सकते हैं यदि आप iPhone 6 (iPhone6 ​​750 * 1334) का उपयोग करते हैं तो आपको इस मान का उपयोग करना होगा लेकिन यह कैसे सभी विभिन्न iPhones के लिए उत्तरदायी है ????

— GY22

आप केवल एक स्क्रीन आकार के आधार पर अपना आधार डिजाइन निर्धारित करते हैं। प्लगइन अलग-अलग स्क्रीन आकार के लिए सही ढंग से adapts

— मार्क

Answer 5

अरे आप प्रतिशत में स्क्रीन चौड़ाई और ऊँचाई पाने के लिए इस वर्ग का उपयोग कर सकते हैं

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),);

Answer 6

स्पंदन में स्क्रीन के आकार या पिक्सेल घनत्व या पहलू अनुपात का उपयोग कैसे करें?

हम MediaQuery की मदद से स्क्रीन के आकार और अन्य जैसे पिक्सेल घनत्व, पहलू राशन आदि का उपयोग कर सकते हैं।

syntex: MediaQuery.of (संदर्भ) .size.height

Answer 7

बस एक समारोह की घोषणा करें

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

नीचे की तरह उपयोग करें

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

Answer 8

हमने देखा है कि 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

Answer 9

निम्नलिखित विधि का उपयोग करके हम डिवाइस की भौतिक ऊंचाई प्राप्त कर सकते हैं। पूर्व। 1080X1920

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

Comments

हालांकि यह कोड प्रश्न को हल कर सकता है, जिसमें यह भी बताया गया है कि यह समस्या कैसे और क्यों हल करती है, इससे वास्तव में आपके पोस्ट की गुणवत्ता को बेहतर बनाने में मदद मिलेगी, और संभवत: अधिक वोटों का परिणाम होगा। याद रखें कि आप भविष्य में पाठकों के लिए सवाल का जवाब दे रहे हैं, न कि केवल उस व्यक्ति से जो अब पूछ रहा है। कृपया स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें और संकेत दें कि क्या सीमाएँ और मान्यताएँ लागू होती हैं। समीक्षा से

— डबल-बीप