I've created a new application on Flutter, and I've had problems with the screen sizes when switching between different devices.
I created the application using the Pixel 2XL screen size, and because I've had containers with a child of ListView it's asked me to include a height and width for the container.
So when I switch the device to a new device the container is too long and throws an error.
How can I go about making it so the application is optimized for all screens?
You can use:
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
To get height just of SafeArea (for iOS 11 and above):
var padding = MediaQuery.of(context).padding;
double newheight = height - padding.top - padding.bottom;
Getting width is easy but height can be tricky, following are the ways to deal with 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).viewPadding;
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;
To clarify and detail the exact solution for future researchers:
Without context:
import 'dart:ui';
var pixelRatio = window.devicePixelRatio;
//Size in physical pixels
var physicalScreenSize = window.physicalSize;
var physicalWidth = physicalScreenSize.width;
var physicalHeight = physicalScreenSize.height;
//Size in logical pixels
var logicalScreenSize = window.physicalSize / pixelRatio;
var logicalWidth = logicalScreenSize.width;
var logicalHeight = logicalScreenSize.height;
//Padding in physical pixels
var padding = window.padding;
//Safe area paddings in logical pixels
var paddingLeft = window.padding.left / window.devicePixelRatio;
var paddingRight = window.padding.right / window.devicePixelRatio;
var paddingTop = window.padding.top / window.devicePixelRatio;
var paddingBottom = window.padding.bottom / window.devicePixelRatio;
//Safe area in logical pixels
var safeWidth = logicalWidth - paddingLeft - paddingRight;
var safeHeight = logicalHeight - paddingTop - paddingBottom;
With context:
//In logical pixels
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;
var padding = MediaQuery.of(context).padding;
var safeHeight = height - padding.top - padding.bottom;
Extra info about physical and logical pixels for the curious:
https://blog.specctr.com/pixels-physical-vs-logical-c84710199d62
The below code doesn't return the correct screen size sometimes:
MediaQuery.of(context).size
I tested on SAMSUNG SM-T580, which returns {width: 685.7, height: 1097.1} instead of the real resolution 1920x1080.
Please use:
import 'dart:ui';
window.physicalSize;
Using the following method we can get the device's physical height.
Ex. 1080X1920
WidgetsBinding.instance.window.physicalSize.height
WidgetsBinding.instance.window.physicalSize.width
MediaQuery.of(context).size.width and MediaQuery.of(context).size.height works great, but every time need to write expressions like width/20 to set specific height width.
I've created a new application on flutter, and I've had problems with the screen sizes when switching between different devices.
Yes, flutter_screenutil plugin available for adapting screen and font size. Let your UI display a reasonable layout on different screen sizes!
Usage:
Add dependency：
Please check the latest version before installation.
dependencies:
flutter:
sdk: flutter
# add flutter_ScreenUtil
flutter_screenutil: ^0.4.2
Add the following imports to your Dart code:
import 'package:flutter_screenutil/flutter_screenutil.dart';
Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option
//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);
Use：
//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),
),
Please refer updated documentation for more details
Note: I tested and using this plugin, which really works great with all devices including iPad
Hope this will helps someone
Hey you can use this class to get Screen Width and Height in percentage
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);
}
}
and to Use like this
Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);
How to access screen size or pixel density or aspect ratio in flutter ?
We can access screen size and other like pixel density, aspect ration etc.
with helps of MediaQuery.
syntex : MediaQuery.of(context).size.height
Just declare a function
Size screenSize() {
return MediaQuery.of(context).size;
}
Use like below
return Container(
width: screenSize().width,
height: screenSize().height,
child: ...
)
A bit late as I had asked the question about 2 years ago and was a newbie back then, but thanks all for the responses as at the time when learning it was a massive help.
To clarify, what I probably should have been asking for was a the Expanded widget, as I believe (hazy memory on what I was trying achieve) I was looking to have a ListView as one of the children of a Column. Instead of using the specific screen size to fit this ListView in the Column I should have been looking to optimise the maximum space available, therefore wrapping the ListView in the Expanded would have had the desired impact.
MediaQuery is great, but I try only to use it to decipher what form factor the screen is using the Material breakpoints, otherwise I try to use the Expanded/Spacer widgets as much as possible, with BoxConstaints on minimum/max sizes, also need to consider the maximum space that is actually available using the SafeArea widget to avoid notches/navigation bar,
Initally I also got stucked in to the issue.
Then I got to know that for mobile we get the exact screen height using MediaQuery.of(context).size.height but for web we will not use that approach so i have use window.screen.height from dart.html library then I also added the max screen size that we can use in web by making some calculations...
import 'dart:html';
getViewHeight =>
window.screen!.height! *
((window.screen!.height! -
kToolbarHeight -
kBottomNavigationBarHeight -
120) /
window.screen!.height!);
kIsWeb
? getViewHeight
: MediaQuery.of(context).size.height * 0.7)
By Using this approach we get max usable screen size dynamically.
import 'dart:ui';
var pixelRatio = window.devicePixelRatio;
//Size in physical pixels
var physicalScreenSize = window.physicalSize;`
Very good, problem is that when you build for --release it does not work.
The reason is that Size is zero at app start so if the code is fast the value of phisicalSize is (0.0, 0.0).
did you find a solution for this ?
Related
I am trying to learn the design in filters, but during my research in the existing templets, I found one of them that completely depends on giving any height or width on this file
import 'package:flutter/material.dart';
class SizeConfig {
static late MediaQueryData _mediaQueryData;
static late double screenWidth;
static late double screenHeight;
static double? defaultSize;
static Orientation? orientation;
void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
orientation = _mediaQueryData.orientation;
}
}
double getProportionateScreenHeight(double inputHeight) {
double screenHeight = SizeConfig.screenHeight;
return (inputHeight / 812.0) * screenHeight;
}
double getProportionateScreenWidth(double inputWidth) {
double screenWidth = SizeConfig.screenWidth;
return (inputWidth / 375.0) * screenWidth;
}
example :
EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(20)),
so what is the difference between that method and giving fixed numbers
The difference is :
Method is Device Screen Dependent
Produces different heights based on the screen size.
Fixed numbers is Device Screen Independent
Produces same height accross devices of different sizes.
Explanation:
Lets assume 2 screens of
First Screen 1000px height ,
Second Screen 1500px height,
Container of 100px to be produced in these devices
In Method:
Height is calculated as (inputHeight / 812.0) * screenHeight;
First Screen : Container height (100/812) * 1000 = 123.1527 px
Second Screen : Container height (100/812) * 1500 = 184.729 px
In Fixed Value:
Height is 100px in both First Screen and Second Screen
The SizeConfig class in the code you provided is used to dynamically determine the dimensions of the screen or viewport, and then scale the dimensions of other UI elements accordingly. This will ensure that your UI layout is consistent and looks good on different devices and screen sizes.
The getProportionateScreenHeight and getProportionateScreenWidth functions in the SizeConfig class are used to calculate the proportionate dimensions of UI elements based on the dimensions of the screen or viewport. They take as input the desired dimensions of the UI element in pixels, and then scale them based on the dimensions of the screen or viewport.
For example, if you call getProportionateScreenHeight(100), it will return the height in pixels that is equivalent to 100 pixels on an iPhone 8, which has a screen height of 812 pixels. If the screen height of the device where the app is running is different from that of an iPhone 8, the returned value will be scaled accordingly.
On the other hand, if you use fixed numbers, such as EdgeInsets.symmetric(horizontal: 20), the dimensions of the UI element will be fixed and will not be scaled based on the dimensions of the screen or viewport.
i am trying to make a listview with lots of images with different dimensions loaded from network.
When I scroll down everything is okay, but when i am scrolling up, first images start to load changing the position of listview. I suppose I need to have a placeholder for images with height of image, but i dont know how to get their dimensions before them loaded. Or i need smth like listview that does not move because of smth upper loading.
I wrote a function that gets a height of image in a cycle (array favorites contains Maps which contain url parameter and height parameter if loaded). The function also converts image's height in the size i actually need by formula with MediaQuery.of(context).size.width - 80 which is the width of images on screen. (Width of the screen minus 40 padding from each side).
This is the code of getting height function:
Future<void> getImageHeight(String url, index) async {
Image image = Image.network(url);
image.image
.resolve(const ImageConfiguration())
.addListener(ImageStreamListener((ImageInfo info, bool isSync) {
favorites[index]['height'] = info.image.height *
((MediaQuery.of(context).size.width - 80) / info.image.width);
setState(() {});
}));
}
And this is the code of image with placeholder (Container):
Container(
color: const Color(0xffE8E6EA),
height: favorites[index]['height'] == null || favorites[index
['height'].isNaN ? 0: favorites[index]['height'],
child: Image.network(
favorites[index]['url'],
width: double.infinity,
),
),
On first loading size of placeholder is still going to be zero, because it takes time to get height of them. But after few time (it usually takes about a second or less) setState is going to be called and images will not lag on scrolling. And if you are loading your images urls from database not all at once you'll need to rerun function to get height of newly added images.
Set minCacheExtend large enough
(to be higher than the highest picture's height)
I had the same issue, I resolved it by Increasing the cache of the flutter app. Default cache size is 100mb. You can place this at the beginning of main.dart
WidgetsFlutterBinding.ensureInitialized();
PaintingBinding.instance!.imageCache!.maximumSizeBytes = 1024 * 1024 * 300; // 300 MB
More Info Here
I and my team are working on a different screen size emulator. While integrating we notice that some properties are overlapped by others, and some are not visible only. So how we can make our app adaptive to different screen sizes. Went through the mediaquery() widget but I didn't understood much.
Using MediaQuery class:
MediaQueryData queryData;
queryData = MediaQuery.of(context);
MediaQuery: Establishes a subtree in which media queries resolve
to the given data.
MediaQueryData: Information about a piece of media (e.g., a
window).
To get Device Pixel Ratio:
queryData.devicePixelRatio
To get width and height of the device screen:
queryData.size.width
queryData.size.height
To get text scale factor:
queryData.textScaleFactor
Using AspectRatio class:
From doc:
A widget that attempts to size the child to a specific aspect ratio.
The widget first tries the largest width permitted by the layout
constraints. The height of the widget is determined by applying the
given aspect ratio to the width, expressed as a ratio of width to
height.
For example, a 16:9 width:height aspect ratio would have a value of
16.0/9.0. If the maximum width is infinite, the initial width is determined by applying the aspect ratio to the maximum height.
Now consider a second example, this time with an aspect ratio of 2.0
and layout constraints that require the width to be between 0.0 and
100.0 and the height to be between 0.0 and 100.0. We'll select a width of 100.0 (the biggest allowed) and a height of 50.0 (to match the
aspect ratio).
//example
new Center(
child: new AspectRatio(
aspectRatio: 100 / 100,
child: new Container(
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.orange,
)
),
),
),
Also you can use:
LayoutBuilder
FittedBox
CustomMultiChildLayout
MediaQuery is a good option for this scenario
for example, I just want to create a container with half of the available width and height of my mobile screen
class MyContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Container(
color:Colors.orange,
width: size.width/2,
height: size.height/2
);
}
}
I first time try flutter for web and build a project on top off existing project according to this documentation https://flutter.dev/web. Project run fine but in chrome half off my application is out off screen. I tried to get screen size with MediaQuery.of(context) and SafeArea() but nothing happens. What is right way to get screen size?
In Flutter, I've been attempting to determine the size of the entire context view. You may get width or height by using MediaQuery with the current context of your widget
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
Around your widget, you'll need a MaterialApp or a WidgetsApp. They are the ones who give the MediaQuery. Flutter will always look up the widget tree to find the widget when you call.of(context).
You can Improve responsiveness by adding Functions like
static bool isSmallScreen(BuildContext context) {
return MediaQuery.of(context).size.width < 800;
}
static bool isLargeScreen(BuildContext context) {
return MediaQuery.of(context).size.width > 1200;
}
static bool isMediumScreen(BuildContext context) {
return MediaQuery.of(context).size.width >= 800 &&
MediaQuery.of(context).size.width <= 1200;
}
In my opinion, don't use a garbage library that doesn't support multiplatform and don't have above 100 pub points instead of create your own functions to do stuff and also you can use expand which expand the screen according to the screen size
don't give size like
height:100
weight:100
it may lead to screen crashing when we use it on multiple screen
I have a simple flutter setup to get the width of the screen on device with resolution 2960*1440.
However, flutter returns a screen width of 411 when I run the application on resolution 2960*1440. How does flutter calculate width of a device?
class page extends StatelessWidget {
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width.toString();
return Container(
child: Text("Height : $height and Width : $width"),
);
}
}
flutter depends on the MediaQuery method to calculate screen size :
MediaQuery.of(context).size.width ;
as per the documentation it returns the number of the "logical pixels" of your screen which each one of them represent several physical pixels by a factor that differs from a device to another, and if you want the actual number of pixels you can use :
MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio ;
and for the actual pixels of your screen height:
MediaQuery.of(context).size.height * MediaQuery.of(context).devicePixelRatio ;