I'm using a SafeArea Widget and want to extract the height of the bottom area which is not within the safe area. As recommended in other sources I tried using MediaQuery.of(context).padding but it always returns EdgeInsets.zero. Is there any other way of getting the size of the bottom region which is not within the safe area?
EDIT:
I had SafeArea widget's bottom property set to true (bottom: true) which always resulted in EdgeInsets.zero. Setting bottom: false returns the actual SafeArea's bottom padding value.
To get Bottom padding use
final bottomPadding = MediaQuery.of(context).padding.bottom;
To get Top padding use
final topPadding = MediaQuery.of(context).padding.top;
If you want to get height of App Bar which is used as flutter Material component
AppBar appBar = new AppBar();
appBar.preferredSize.height;
To get only Safe Area's height, try to access MediaQuery somewhere before adding SafeArea in the widget tree. This way you will get MediaQuery.of(context).padding with some value instead of EdgeInsets.zero. Padding is set to zero after insertion of SafeArea in the widget tree.
Doc for the child of SafeArea Widget says
The padding on the MediaQuery for the child will be suitably adjusted
to zero out any sides that were avoided by this widget.
So to get height excluding the height of all the system layers, try -
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final padding = MediaQuery.of(context).padding;
final heigth = size.height - padding.top - padding.bottom;
return SafeArea(
...
);
}
import 'dart:ui' as ui;
MediaQueryData.fromWindow(ui.window).size;
MediaQueryData.fromWindow(ui.window).padding;
SafeArea widget's bottom ant top properties buy default are set to true.
Setting 'bottom: false' and 'top: false' returns the actual SafeArea's bottom and top padding value.
return SafeArea(
top: false,
bottom: false,
child: Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
...
Related
I am new in flutter I can't understand that is infinity size render in flutter
If I use container with infinity width then it will render but in box constraints documentation infinity size can't render
This is because there is something constraining the widget, when you set as an example:
Container(
width: double.infinity,
),
it will try to take an infinity size, which usually will throw an error to you, but it's constrained so it takes the max possible width.
The Container widget is built on top of different multiples widgets such as ConstrainedBox, DecoratedBox, Align, LimitedBox... , the ConstrainedBox defaults to the BoxConstraints.expand(), check it's source code:
// ...
child: ConstrainedBox(constraints: const BoxConstraints.expand()),
);
but if you check also the Scaffold source code :
// ....
final BoxConstraints fullWidthConstraints = looseConstraints.tighten(width: size.width);
so trying to expand that Container even within infinity, will expand it at maximum on the fullWidthConstraints which is, in this case, the screen's width.
to display image according to it's original size i do the following
Image.file(File(fileCreated!.path)),
to display image to fit height and width (full screen) i do the following
Image.file(File(fileCreated!.path),fit: BoxFit.cover,height: double.infinity,width: double.infinity,),
ok it is now in full screen but i noticed there is some missing parts of the image contents is no longer visible on screen like 20 pixel from width and height , i know flutter do it for keeping the image quality the same. but How i ignore that behavior
How could i display image in full screen so the whole image parts is visible on screen ?
i tried with following
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
whatever i change the height. the width will be auto changing too, even if i did not change the width !!!!
but same result
edit :
full parent
#override
Widget build(BuildContext context) {
return Scaffold(
body: Image.file(File(widget.imageFile,),fit: BoxFit.cover,height: MediaQuery.of(context).size.height,),
);
}
}
You can use MediaQuery, but I will prefer using LayoutBuilder on top widget. Also check the parent widget if it is having padding/margin.
Image.file(
File(fileCreated!.path),
fit: BoxFit.fill,
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
I'm new to flutter, I have created a multistate toggle button but I want to convert it into dropdown in case the container doesn't have enough space to show the widget. Earlier I was using the LayoutBuilder context width but it is taking the whole width of the page not of the container containing the widget. Can you please help me with this ?
You are using the right approach. LayoutBuilder would work for you, but you should factor the entire widget into its own StateLess widget and use that context to do your measurements.
LayoutBuilder provides a BoxConstraints object with minWidth, maxWidth, minHeight, maxHeight properties that you can use in your code to decide which widget to embed in the tree. The dimension of that BoxConstraints object are calculated from your Widget's immediate ancestor.
Supposed you create MyMultistateToggleBoxOrDropdownWidget() and implement its build method like this:
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// If constraints.maxWidth isn't wide enough,
// return a dropdown Widget,
// otherwise return the multistate toggle box.
}
}
Now that you have a Widget that returns what you want based on width, you need to now wire it into the correct context.
What you're probably missing is that you need to wrap your custom widget inside of something that controls the screen space that you want to present your Widget inside. A SizedBox() will do for this example.
Your solution took the whole page width because that was the width of your Widget's immediate ancestor in the Widget tree.
SizedBox(
width: 100.0,
height: 100.0,
child: MyMultistateToggleBoxOrDropdownWidget()
)
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 have a Positioned widget that I need to make it full width of the parent container
Widget tree is like this
Expanded
Stack
SomeOtherWidgets
Positioned(
left: 0,
bottom: 0,
height: 11,
child: Container(
// box decoration for this container
)
)
So what I need is a widget placed at the bottom of the Stack that goes on top of everything else in the Stack, that takes up the width of the ancestor Expanded
Is this possible? Thank you
You need to set left and right to 0, so it will expand full width.
If you want to expand a Positioned widget height and width, you can use Positioned.fill() which will set left/right/top/bottom to 0. (but you can override them if needed)