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.
Related
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
In Flutter web, there are limitless possibilities of what sizes may be forced upon the app by resizing the browser. For example, my sign in with Apple and sign in with Google buttons from the flutter_signin_button package overflow when the browser is shrunk too small:
In a case where the window is shrunk unreasonably small, is there a way that I can suppress the overflow message? Or is there a release version of Flutter web that will not have these?
Wrap your widget into the scroll view. This is the easiest way to resolve the issue. Provide the fixed constraints for the both button and wrap into the scrollview with Horizontal scroll direction. If the screen size comes under the constraints, it will be the scrollable.
Use MediaQuery.
For width - MediaQuery.of(context).size.width;
For height - MediaQuery.of(context).size.height;
For size - MediaQuery.of(context).size
if(MediaQuery.of(context).size.width < 200px)
{
return someWidget
}
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.
I've spent hours attempting to make an AppBar show a title having a particular height. From what I have read on SO etc., it can be done, however I cannot achieve it and I have spent many hours attempting to. I need to make the "title:" and "actions:" have a height of about 70 or thereabouts.
From what I can determine from various tests that I have performed, when the size of the AppBar exceeds a certain size, any excess size automatically goes to the "bottom:" which in the case of my app is the TabBar.
I tested a PreferredSize for that AppBar in another test where there was no "bottom:" and no TabBar, and the space allocated to the AppBar in the program was sufficient to display the large title, but only part of the title having a large font showed. The remainder of the space that was allocated to the AppBar in that case was just blank and showed below the display of the title.
In another program that I have written, I have set the AppBar height to 35 and that works without a problem. So it appears that setting the AppBar height to a low value works for the title, but setting it to a large value does not.
I would appreciate a solution to this problem because the need for this is integral to my program and I have spent a lot of time attempting to solve the problem.
You can use toolbarHeight:
AppBar(
toolbarHeight: 100,
)
This problem appears to be solved by AppBar "flexibleSpace:".
The AppBar title and actions are part of the AppBar toolbar. The problem appears to be that the height of the AppBar can be changed, and that allows the height of the toolbar to be reduced, but the height of the AppBar toolbar cannot be increased beyond a height of 56. Any increase in the height of the AppBar beyond 56 does not allow the height of the toolbar to be increased beyond 56.
This is the subject of issues #7330 and #23373 for Flutter on Github. It would be great if these issues could be solved by allowing an increase in the AppBar toolbar height beyond 56. Currently the only way to solve this appears to be to write a custom AppBar and the standard AppBar has some good features.
Just try this pseudocode
Text('your text here', style:TextStyle(height:70.0));
You can use preferredSize widget to give custom height in appBar
appBar: PreferredSize(
preferredSize: Size.fromHeight(50.0),
child: AppBar(
.............
)
),
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).