Search code examples
gofyne

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


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()
}

Solution

  • 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.