Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

go

fyne

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()
}
like image 781
Robman Avatar asked Sep 05 '25 03:09

Robman


1 Answers

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"),
)
like image 107
jozo Avatar answered Sep 08 '25 14:09

jozo