Is the following structure possible with "wrap" in flutter? - flutter

These boxes will basically be images of unknown resolutions. I want them to fit in such wrap structure that they are put one by one from left to right, but if there's more space in right column then the image should be placed in the right column instead of the left one.
I was wondering if this is possible with "wrap" widget, I tried it and couldn't get it to work without having to set a fixed height and wrap alignment to vertical. But I can't have a fixed height because there will be unknown number of images.
If nothing works, I will have to have a custom solution using columns or rows and I can do that but I just want to know if there's a simpler way to do this. Thank you in advance!

Related

trouble with fixing elements in row in flutter

look at the pic
I don't want elements to change their positions especially in horizontal axis when their strings changed
I mean it should be like a table with fixed columns.
can I do this just with row?
It's probably because you set a defined width for spacing.
You could use a combination of Flexible & Expanded widgets to wrap all the children in your Row.
That should align them correctly.
You can find the corresponding code here

What's the proper way to align a strechable Text and an image to two ends in Unity UI?

I have an UI element that has a Text and an Image as its children. It has a HorizontalLayoutGroup component that enables Control Child Size and Child Force Expand.
I want the Image has a fixed size, and Text has strechable size controlled by the HorizontalLayoutGroup. So when the Image is set to inactive, the Text fills the whole space and when the Image is active, the Text shrinks a little bit in order to give space to the Image. Right now this part works good.
My second goal is to align them to both ends: the Text in the left and the Image on the right with space in between. But changing Child Alignment can't achieve this.
I tried the following solution:
Add LayoutElement both to Image and Text. On Text, enable Flexible Width and set a a value, on Image, enable Min Width and set to a value. Manually adjust the two values until it seems right.
This solution seems to work, but I don't know why. Is anyone familiar with this?What's the recommended way to do it? Thanks!
I worked it out. On the LayoutElement, treat Preferred Width or Preferred Height as Max Width or Max Height. Enable them, set the value the same with min value. One the other objects that you want to stretch, enable Flexible values. Then all worked as we want.

Trying to reduce the size of boxes on screen

I am trying to setup a style based on bootstrap3.
Basically I want to try and reduce the size of the input elements which I have done, getting a decent proportion of 'box' vs 'text'.
However if I use the same font-size in a select box with the same size then I get a situation where the text is masked along the bottom edge...
I think there is a tiny bit more margin at the top of the select box, but for the life of me I cant find where that is set in BootStrap to change it (if at all).
I think all I need to do is move the text in the 'select' element up by a couple of pixels and it will align with those bits of text in standard text boxes....
Can anyone point me in the right direct please?
Found the associated CSS in the bootstrap, with a bit of trial and error....
Mainly in the 'form-control' section.
but now also using Bootstrap 4, with a couple of additional styles.

How can I enforce vertical alignment of GTK widgets across containers?

I'm using PyGTK on Windows to develop a small application.
How can I enforce vertical alignment of widgets across containers to achieve something like this?
In the mockup, widgets are in separate frames, but I want to maintain vertical alignment as if they were in the same gtk.Table. If I put them in the same table then I can't put a gtk.Frame around the groups of widgets.
Maybe it's already too late for you, but for other people that find this question. You can create an array of SizeGroup with 8 elements, and add to each element every widget that should go on the same column, this will make the width of each cell on the respective grid to be the same size, if all widgets are added, this will have the side effect of also align them vertically. Just be sure the amount of columns in the grid below is the same as above.
Also, if your labels need some special alignment there is currently a bug that does not let you use halign and valign when using SizeGroup, see https://bugzilla.gnome.org/show_bug.cgi?id=733981 .

gtk treeview column resizing and horizontal scrollbar

I have a gtk treeview (inside a GtkScrolledWindow) with two columns.
If I set both columns to the default sizing policy, I have a horizontal scrollbar for the treeview but the columns can't be sized down by the user, which is impractical.
If I set both columns to setSizing Fixed, fixed width 120, I get a nice display and the columns can be resized, but there is no horizontal scrollbar in the treeview (since the columns size down to fit in the width of the treeview I guess).
If I set the first column to setSizing fixed, fixed width 120, the second one to automatic, only the second column is displayed (???).
I would like that by default the first column takes let's say at most 60% of the display, the second column can go all the way and I have a horizontal scrollbar. Certainly I want the user to be able to resize them up or down, not as with the default policy, that you can resize them down!
That's why I tried the first column fixed, the second automatic, it was promessing but I don't understand why the first column is not displayed at all in that configuration.
I add the cell renderers with packstart true, I tried false but it didn't change anything, also I tried setting the expand for the columns to true or false, which didn't have any effect.
Note I'm using the gtk2hs haskell bindings but I'm certain it would be the same in any other gtk binding. Just mentioning if people will ask for code samples.
I'm pretty sure this is a common problem... I'd say nautilus is fixing it the way I'd like to fix it, but I think digging in the nautilus source is going to be quite long...
EDIT well i've discovered the cell renderer's ellipsize setting also has an effect. Setting it to end for the first column and none for the second should be what i want but then the first column is very small and cannot be expanded through resize...
EDIT2 well for now i've moved to word wrapping for the cell renderer, that way i don't have to bother with a horizontal scrollbar... Still curious for the solution to that question though.