How to add padding, font size and colours to fyne UI app

Question

I have this sample app code below for a UI I'm implementing using the fyne toolkit, and cant figure out how to align the buttons to the left, makes top text bigger, and add colours.

I've tried trying to create a custom theme to implement the UI features I need, but my understanding of the godoc for the fyne toolkit is lacking. Is there a doc someone can point me to to make this work? or provide me with some pointers, as the toolkit is poorly documented

this is my sample app code

package main

import (
    "fyne.io/fyne"
    "fyne.io/fyne/app"
    "fyne.io/fyne/layout"
    "fyne.io/fyne/theme"
    "fyne.io/fyne/widget"
)

func main() {
    a := app.New()
    a.Settings().SetTheme(theme.LightTheme())
    w := a.NewWindow("myapp")
    w.Resize(fyne.NewSize(340, 600))
    w.SetContent(widget.NewVBox(
        widget.NewLabelWithStyle("myApp version1", fyne.TextAlignLeading, fyne.TextStyle{Bold: true}),
        widget.NewLabelWithStyle("Welcome to \n myAPp", fyne.TextAlignLeading, fyne.TextStyle{Bold: true}),
        layout.NewSpacer(),
        widget.NewButton("Register", func() {
            a.Quit()
        }),
        widget.NewButton("Login", func() {
            a.Quit()
        }),
    ))
    w.ShowAndRun()
}

The Godoc probably doesn't cover the topic, because the topic can't be addressed by Go. You have to do this in the frontend, with HTML, CSS and/or JavaScript. — Jonathan Hall, Sep 23 '19 at 10:42
It seems there isn't easy way to do it now - [How to change color of GUI components](https://stackoverflow.com/questions/57651536/how-to-change-color-of-gui-components) — RimeBeliskner, Oct 26 '19 at 21:45
HTML, CSS and other web technologies have no impact on Fyne. It specifically avoids using them in rendering — andy.xyz, Dec 13 '19 at 00:22

score 8 · Answer 1 · answered Oct 18 '20 at 18:36

You can't do those things out of the box but you can use canvas from Fyne. Examples:

A label with color:

label := canvas.NewText("Hello world", color.White)

A label with different font size:

label := canvas.NewText("Hello world", color.White)
label.TextSize = 50

Aligning to the right with VBox:

layout := fyne.NewContainerWithLayout(
    layout.NewVBoxLayout(),
    layout.NewSpacer(),
    widget.NewLabel("Hello world"),
)

score 2 · Accepted Answer · answered Dec 13 '19 at 00:17

To align the buttons differently you will need to use a different layout (VBox uses the Box layout).

Changing the colours and sizes of standard widgets is not possible. You can specify a different text colour or size in a custom theme but it will apply to all components. If you want elements on screen that don’t conform to the theme you could use the ‘canvas’ package as that deals with lower level elements. For example canvas.Text can be any size or colour.

How to add padding, font size and colours to fyne UI app

2 Answers2

Linked