I have an flutter web-app, it works for all screen sizes. I assigned an variable "width" to get the screen width and based on that entire app is built.
When I Zoom in or out on chrome, it requires me to refresh the page to get the desired sizes. Unless I refresh the widgets don't resize.
I want a certain trigger like functionality, where if there is change in width, the app must rebuild.
How can I achieve this ?
You can use a LayoutBuilder to achieve this. This widget has a builder parameter that is called as the layout constraints change.
LayoutBuilder(
builder: (context, constraints) {
},
)
The constraints provide options that allow your application to understand how much space is available
constraints.maxWidth; // get maximum available width
constraints.maxHeight; // get maximum available height
constraints.minWidth; // get minimum available width
constraints.minHeight; // get minimum available height
These can be used to conditionally change the layout based on the available space and rebuilds at layout time.
Alternatively, you can use a simply MediaQuery. You can get width:
MediaQuery.of(context).size.width;
and height:
MediaQuery.of(context).size.height;
However, these calls must be done in the build method for the sizes to change with each rebuild.
Related
I made a web-app with flutter and there are bar-charts. I want to refresh them if the screen size changes. This works fine if I switch between the browser window option "shrink" and "enlarge".
But if I use the arrows to manually change th size of the window I get this error:
"The widget has been unmounted, so the State no longer has a context..."
Does anyone knows why this appears?
Use flexible as child of scaffold. Or Container() with height and width = MediaQuery.of(context).size.height and ...width respectively.
I am taking ListView() or SingleChildScrollView() in body widget by default. So it is scrolling the content if it is less content. I want to scroll enable only if content is greater than screen height. If content height is less than screen height, need to disable scroll.
double? physicalSizeScreenHeight =
ui.window.physicalSize.height / ui.window.devicePixelRatio;
physics: physicalSizeScreenHeight <= 700
? AlwaysScrollableScrollPhysics()
: NeverScrollableScrollPhysics(),
It is working for some devices and not working for some devices depends on screen width and height and also depends on resolution.
Without checking any condition at "physics" for always or never and allow to AlwaysScrollableScrollPhysics(), then depends on conent height, need to enable/disable scroll.
Any suggestions would be helpful to solve this issue.
In fact, one of the (many) differences between SingleChildScrollView wrapping a Column, vs directly using a ListView, is the the former will only scroll if there are too many items in the Column.
If that's not what you are seeing, you might have other layout issues.
Try this simple layout SingleChildScrollView > Column > Text('Hi') and verify that it won't scroll.
try to use it
final size = MediaQuery.of(context);
final apparentSize = size.size.height - size.padding.bottom - size.padding.top
I have no idea to figure out this problem in flutter. I want to know the size without app bar size and tab bar size(up).
I use variable "vertical_size" as
var vertical_size = (MediaQuery.of(context).size.height -
AppBar().preferredSize.height -
MediaQuery.of(context).padding.top);
but I didn't figure out the tab bar size. It's mean there are oversized in Iphone. (Android is okay in now...)
Do you have any idea to measure tabbar height using Mediaquery? Or is there any idea to measure the actual using area?
You can always figure out the free space in any place you want in your layout with LayoutBuilder
In case of full usable screen height, you can use MediaQuery, but aparat from appbar's height and top padding, remember about bottom padding. You need to substract it as well
Hi and welcome to StackOverflow.
It's not oversized in iOS. What happens is that the AppBar will have in consideration the safe area, hence, its heigh will be bigger/smaller based on the device it is running on.
If you want to get the height of the screen without the AppBar heigh, just do it as the following:
Widget build() {
AppBar appBar = AppBar();
double vertical_size = MediaQuery.of(context).size.height - appBar.preferredSize.height;
return Scaffold(
appBar: appBar,
body: // your widget
);
}
The AppBar's height will have in consideration the device's status bar and so on, so there's no need to remove the inset padding manually.
Widgets like PreferredSize or SliverAppBar.expandedHeight need an actual height number to work, but sometimes I want that height to be the height of another Widget that hasn't been rendered yet, so it's height is unknown.
I would like then to simulate the Flutter Framework itself and falsely render a copy of that widget, so I could grab it's size and them use it on the first time my build function runs.
How can this be done?
I want to place a CachedNetworkImage as the leading property inside a ListTile and have the image scale itself to fit the height of the ListTile. Is this possible without specifying a fixed height for the CachedNetworkImage?
What I have right now is this, which looks good but uses a fixed height of 32px.
return ListTile(
title: Text(record.title),
subtitle: Text(record.type),
leading: CachedNetworkImage(imageUrl: url, fit: BoxFit.scaleDown, height: 32),
onTap:_onListItemTap,
);
I'm not a fan of fixed dimensions, but perhaps I should be? Can I expect that 32px in Flutter will always be appropriate for a ListTile on any device?
Or is there a better way to make the size of my images adjust dynamically to the other content of the ListTile?
The leading element of a ListTile is normally expected to be an icon, although of course you can use anything else. But one way of doing it is to use IconTheme.of(context).size for your image's size, and then specify the size in your theme. That way, you could theoretically set theme based on the screen size at the top level of the app, and have it automatically propagate to wherever you use it. Most of the time you won't need to do that however, as flutter automatically handles different screen DPIs.
Another possible way of doing it would be to use an AspectRatio widget around the CachedNetworkImage, so that the width is dependent on the ListTile's height (which should be constant for a particular type of ListTile).