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.
Related
What is the proper way to handle device size globally. The idea is not to have a [MediaQuery.of(context).size.width] on each screen of the app. There is already a question and answer about it, but the only answer is out of date because there was no null safety yet.
The answer suggests creating a constants.dart file, like in the image below:
1
And initialize in the build of the first widget of the application:
2
The problem is that for it to be constant it must have a value, and not wait for the first build. It is also true that the value canchange based on device orientation and I would like to handle this as well.
I have doubts about it. if someone can help me
You cannot save the screen dimensions as a constant, because they will change if the device is rotated, or when the screen is resized, such as for desktop and web apps.
Instead you should be pushing your cutpoint decisions as low as possible, using LayoutBuilder.
LayoutBuilder seems preferable over every use of MediaQuery for sizing a viewport (either the whole screen, or the space left in a column or other layout).
LayoutBuilder also works hard to avoid rebuilding its child if the size doesn't change and the parents haven't had to re-layout.
The builder function is called in the following situations:
The first time the widget is laid out.
When the parent widget passes different layout constraints.
When the parent widget updates this widget.
When the dependencies that the builder function subscribes to change.
The builder function is not called during layout if the parent passes the same constraints repeatedly.
And you don't have to think about "the height of the appbar" ever again, because you're getting the space left, not the total space on the screen.
Check it out: https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
I am curious if I should always use a SafeArea widget at the top level of my screen. I mean....when would I want my content blocked by things like a notch? For me it seems like the answer is never.
So should I not just use SafeArea on every page? If so, should it be above or below the Scaffold widget?
You don't have to use SafeArea on every screen. It actually depends if an AppBar is used or not, because the AppBar automatically calculates the values and adds the required padding.
If you use it above a Scaffold the area where the padding is applied would be black. On the other hand, if you use it below the Scaffold the color of the area would depend on the app theme, probably the Scaffold background color.
If you won't add an app bar or add it. if you want to adjust the screen to be responsive using MediaQuery and you don't need any scroll inside the screen use it.
Use it as the first widget in the body of the scaffold.
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.
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 created a widget, say MyBox, which has many other widgets. i have to use that widget on different page, however on different page, the size of the widget is different, on some page it's smaller, on other page it's bigger. Just wonder is there any way in GWT to zoom in & out the widget? Thanks
You can set the width and height of a widget, and the normal kinds of "zooming" that happen with HTML will happen to your widget too. If you want inner widgets to resize automatically, check out Layout Panels in GWT 2.0 and later.