How to "css" the container and layouts.

[Tech-Dex]

Hello,

I want to build a small interface, nothing fancy because I am not great with design. I managed to use the containers and layout in order to build something that is usable and looks decent, but I don't like exactly how the big space looks ( spacer ).

I used spacer between "header" and "body" in order to make the header smaller, otherwise will have the same size as the body.
Similar issue for for the "Go to shop" Button. I would like to have it smaller and maybe in row instead of cols ( but the problem will be again with the big space between first col and second col ).

Another one would be to center the header and to make the button and search smaller.
I can't find anything in the documentation and I am feeling a little bit lost in containers/layouts.

content := container.NewGridWithColumns(1,
		container.NewGridWithColumns(1,
			container.NewGridWithRows(1,
				container.NewCenter(titleW),
				searchW,
				searchBtn,
			),
			layout.NewSpacer(),
			layout.NewSpacer(),
			layout.NewSpacer(),
		),
		container.NewGridWithRows(1,
			container.NewGridWithColumns(1,
				container.NewMax(
					widget.NewListWithData(providerDealListB,
						func() fyne.CanvasObject {
							return widget.NewLabel("template")
						},
						func(i binding.DataItem, o fyne.CanvasObject) {
							o.(*widget.Label).Bind(i.(binding.String))
						}),
				),
			),
			container.NewGridWithColumns(1,
				container.NewGridWithRows(1,
					bestDealLbl,
					bestDealW,
				),
				bestDealOpenLinkBtn,
			),
		),
	)

[andydotxyz]

I would recommend using a border container as the top level - your top bar would be the "top" component and the rest of your app in the "content" (5th param to container.NewBorder).

https://developer.fyne.io/container/border

[Tech-Dex]

Hello andydotxyz.
Thanks a lot for the idea, now that looks better for sure. It feels a little bit hacky with the NewBorder(top) to make things exactly how I imagine. If that's the best way, I am happy with the result. If there is nothing better that I can do feel free to close the thread.
Thank you a lot.

	content := container.NewBorder(
		container.NewGridWithColumns(1,
			container.NewGridWithRows(1,
				container.NewCenter(titleW),
				searchW,
				searchBtn,
			),
		),
		nil, nil, nil,
		container.NewGridWithRows(1,
			container.NewGridWithColumns(1,
				container.NewMax(
					widget.NewListWithData(providerDealListB,
						func() fyne.CanvasObject {
							return widget.NewLabel("template")
						},
						func(i binding.DataItem, o fyne.CanvasObject) {
							o.(*widget.Label).Bind(i.(binding.String))
						}),
				),
			),
			container.NewGridWithColumns(1,
				container.NewBorder(
					bestDealLbl,
					nil, nil, nil,
					container.NewBorder(
						bestDealW, nil, nil, nil,
						container.NewBorder(
							bestDealOpenLinkBtn, nil, nil, nil, nil,
						),
					),
				),
			),
		),
	)

[Jacalz]

The border layout is the Swiss Army knife of Fyne layouts. I wouldn't call it a hacky solution by any means.

Btw, I believe that you can remove the max container. A max with only one item does nothing and the layout has been deprecated in favour of StackLayout() for the next release (same behaviour, better name). Items within a container can never become larger than the container itself.

[Tech-Dex]

Yes, it feels like Border Layout is the way to go for most of my needs, you said it right : Swiss Army Knife. I was unaware of it.

Thank you for your advice around MaxContainer.

[blaize]

I use BorderLayout almost everywhere.