I have an Image (which is a map), that I want to always fill its container, but keeping its aspect ratio.
I put it inside an InteractiveViewer, so it can be zoomed and panned.
When the interactiveviewer zoom level is minimum(1) the whole width of the image must fit the container, and if the height does not fit, It should be possible to pan.
I tried many combinations of widgets, but could not find the right one for this behavior.
Can anyone with more flutter experience help?
Best Regards
I was able to solve it by using constrained=false in the InteractiveViewer widget
Related
I'm making a grid of hexagons by placing Positioned Widgets. I have them inside an Interactive Viewer Widget so I can zoom in and out and move around.
Issue I'm having however is that with a large number of them being rendered it's far too laggy. It's unusable with about 4000 rendered on screen and ideally I need 10s of thousands. And this has nothing to do with the Widget itself as it's the same when replaced with a SizedBox with a Container or Text in.
I am using an InteractiveViewer.builder and only render the Widgets on the screen, which works great and there's no lag when zoomed in with few widgets on the screen, however I need to zoom out and see more.
I've also run in release mode and it's the same. I'm running in Windows and my PC is more than capable, too capable compared to the phones this should also be able to run on.
Is there some way to increase performance, or some other way I should be doing this instead of thousands of Positioned Widgets? Or is Flutter just not suited for this?
Edit: Image.
Using a widget for each individual hexagon at that scale feels like massive overkill. If you're going to use flutter, maybe use a CustomPaint widget, which allows you to draw shapes directly to a pixel grid?
You could wrap it in a GestureDector and implement scrolling and zooming via that perhaps?
I am coding a website with Flutter. My layout uses "blocks" of vertical content laid within a SingleChildScrollView. They look like rectangles of content (with images, text, buttons, etc in them), taking up the whole screen horizontally, and the whole screen vertically.
Currently, whenever I move the screen size around (drag the web window to be different sizes) the website breaks. If I move it to be really small horizontally, I cannot fit in the content I need, if I move it to be small vertically I get overflow errors (and vice versa). This is because I am using MediaQuery.of(context).size.height/width to layout my website.
My rectangular blocks of "content" all have their same respective parent: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height) so they completely adjust everytime I move the window. Is there a better way to implement responsive web? Would it be better to just specify (for example) 620 pixels height for the Container and double.infinity for the width? And then somehow make everything fit inside not overflow/look weird? Also, when I drag the bottom of the web window nothing expands/grows properly because at that same time all my "content blocks" are all resizing their height because I am technically resizing the screen.
Finally, I've tried using BoxConstraints's minHeight, maxHeight, minWidth, and maxWidth, yet they don't seem to work and still produce the yellow/black overflow lines when testing in a webview. Huh?
Also, how would I get a bottom scrollbar to appear horizontally once my webview window is fully dragged close horizontally and half my content is cut off, but I still would like to see it. Would this be necessary? Or would another solution not need this? I'm not sure...
How are other people working around this and achieving this? I feel like I am doing this completely wrong. It shouldn't be this difficult.
(Also, using LayoutBuilder I have 2 additional builds for mobile/tablet when the screen width reaches less than 1100px)
I am developing an image editor in flutter. For that, I need to add a feature of adding images and text dynamically to the screen. Each of them should be able to independently scale, position, and rotate. There should be an anchor point like in word or in photoshop to indicate the active image and to scale and rotate them(sample in the image). The image should be positioned with drag and drop.
The widget should be able to scale in x, in y, and in both xy.
Things I have tried
1.matrix_gesture_detector
I think this package doesn't have the option to scale only in x or only in y. It uniformly scales the widget in x and y. Also making the active image with something like in the image is difficult. If we wrap the active image in a custom widget like in the image, the widget also scales with the image. For eg if the border thickness is 1 px when scaled the thickness also scales making it wired.
2. Using Transform Widget.
When the transform widget is used the above-mentioned problem of the widget indication the active image around the image also scales with the widget. Also in transform when scaling I have to adjust the alignment or the origin dynamically with respect to the scaling chosen. For eg, if I want to scale in the top direction only, I have to set the anchor point to the bottomCenter.But here the anchor points are set with respect to the initial size of the widget. So when changing the anchor point to scale in a different direction, the widget jumps to a corresponding alignment position with respect to the original size of the widget.
3. Using Positioned.fromRect
I have tried this solution from StackOverflow
Resizing a rotated container in flutter, but here the problem is the solution is only for one widget. So I wrapped that in a stack. But when rotated, it rotates the full stack. The stack takes the height and width of the canvas. So the alignment of the anchor point of the transform widget is with respect to that and not with respect to the image.
NB: I am using Getx for state managemanet. If you can provide the solution in getx, that is preferred.
You can warp a Stack->Positioned->Transform.rotate->Your Widget.
Also refer the source code of photobooth.
I have a GestureDector wrapping a Container.
I am trying to do some logic based on where motions land relative to the total width of the GestureDetector. But I do not know the width ahead of time, so there is no way I can do this logic.
What is the proper way to go about achieving this in flutter?
A year has passed since last time I had to use flutter to build a little app for my firm. At that time MediaQuery was the trending way to create layouts ready for every screen size.
Today I am trying to build a simple layout like this one:
The part I am concerned about is the 3 circles in the middle. They have an icon and text inside and must be positioned at the positions seen in screen.
So, I have been investigating a bit how to create that part of the layout in a responsive way. I mean, that the circles are positioned at the correct position and size relative to the screen size and that the icon and text inside the circle are positioned and resized correctly too ,to avoid overflowing the circles.
Is the MediaQuery class still the only tool that can be used to build this kind of responsive layouts? Would you tackle this layout using a different method?
Yes MediaQuery is still heavily used, but Flutter has introduced some good widgets based on Orientation and Responsive Layouts:
OrientationBuilder - Builds different widget trees based on Orientation - For Example if the device is horizontal, you might see a Square instead of a Circle.
CustomMultiChildLayout - It can automatically decide how to size and position each child, as well as size the parent. Single widgets can be used CustomSingleChildLayout
Also when resizing text automatically I found Auto Size Text to be amazing