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
Related
I create a GridView in flutter with the shrinkWrap set to true (which I expect the GridView will be shrink exactly as the content's size).
But in my demo (Green background color indicates GridView , and the Red Color indicates the content widgets in the GridView)
I found that , the GridView will not shrink as small as possible to it's contents. The GridView's height is a bit larger than the GridView's content height .
What makes the GridView not shrink as small as possible?
OK, after debugging with the source code . I found the reason to this problem:
Seems when you create a ListView & GridView with a null padding passing to it . Flutter SDK will make a Inset (RenderSliverPadding)during the layout of the ListView&GridView.
So the way to remove this padding is set a padding in the ListView&GridView's constructor
I have a screen with a column in flutter which is basically a form. At first i had trouble with the fact that the pop-up keyboard reduced the visible space and thus had an overflow. Fixed that adding the SingleChildScrollView and setting a container as a parent with an specific height (based on devicequery size).
Unfortunately, when I test the rotated screen, i get the same problem. Is there a way to set the height of the container which controls the SingleChildScrollView so that it adjusts to the total size occupied by the column widgets?
Please add Listview instead of Colum Widget.
in your scaffold
set resizeToAvoidBottomInset to false or add it
resizeToAvoidBottomInset:false
I am trying to display a scrollbar on the right-hand side of a ScrollView (a GridView in this case) but constraining the width of the scrollable area while still displaying a scrollbar on the right-hand side. I can't see how to customize the position of the scrollbar relative to the Scrollable
See this DartPad for an example.
In the example above, the ScrollBar is displayed directly to the right hand side of the GridView's children, but I would prefer to have it all the way to the right. I can't find any affordances in the GridView constructor to help me with this. Does this require a CustomScrollView or can this be achieved with a normal GridView?
It is necessary that this GridView to have exactly 400px in width? If this is not necessary you can set the width of your ConstrainedBox like:
width: MediaQuery.of(context).size.width,
Then the GridView will have the exact size as your screen, so in consequence th scroll bar will be where you want it to be.
The fix was to swap the Center and Scrollbar widgets.
Before:
Center
Scrollbar
ConstrainedBox
After:
Scrollbar
Center
ConstrainedBox
https://dartpad.dev/09ddf64d254b0c331920cf970acc4447
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.
Code example: https://gist.github.com/v1z4/4c231063b9e22eac5961fb0c437119fe
I have a list of dynamic elements with different height, and I need to have a scrollbar. I use iOS style widgets, so I have wrapped ListView in CupertinoScrollbar().
I test it in real device attached, because simulator does not have scrollbar.
The list works fine, but scrollbar is twitching, because the height of elements are different.
It works fine when I add fixed height to container in ListView element, but text is being cropped and looks bad. Is there a way to fix twitching?