0

Button color, background, image – Fyne GUI Golang tutorial 44

Button color, background, image – Fyne GUI Golang tutorial 44

What is this tutorial about ?

Change fyne button color?

Fyne buttons are transparent.

there is no direct way to change color. But..

We are going to use a rectangle. If you change  color of rectangle. Button color will be changed.

 

Change fyne button background color?

If you place a color rectangle or any other shape. Button Background color will be change according to it.

 

Set image as Button background color

You can place image in the button background and Button will show image as a background.

 

<div>
<div>package main</div>
<div>import (</div>
<div>    "image/color"</div>
<div>    "fyne.io/fyne/v2"</div>
<div>    "fyne.io/fyne/v2/app"</div>
<div>    "fyne.io/fyne/v2/canvas"</div>
<div>    "fyne.io/fyne/v2/container"</div>
<div>    "fyne.io/fyne/v2/layout"</div>
<div>    "fyne.io/fyne/v2/widget"</div>
<div>)</div>
<div>func main() {</div>
<div>    a := app.New()</div>
<div>    w := a.NewWindow("Colored Button")</div>
<div>    //resize window</div>
<div>    w.Resize(fyne.NewSize(400, 400))</div>
<div>    // Let show out button on screen</div>
<div>    w.SetContent(</div>
<div>        container.NewVBox(</div>
<div>            red_button(),</div>
<div>            red_button(),</div>
<div>            red_button(),</div>
<div>            red_button(),</div>
<div>            // let show / display buttons</div>
<div>            blue_button(),</div>
<div>            green_button(),</div>
<div>            img_button(),</div>
<div>        ),</div>
<div>    )</div>
<div>    w.ShowAndRun() // show and run app</div>
<div>}</div>
<div>// first colored button</div>
<div>func red_button() *fyne.Container { // return type</div>
<div>    btn := widget.NewButton("Visit", nil) // button widget</div>
<div>    // button color</div>
<div>    btn_color := canvas.NewRectangle(</div>
<div>        color.NRGBA{R: 255, G: 0, B: 0, A: 255})</div>
<div>    // container for colored button</div>
<div>    container1 := container.New(</div>
<div>        // layout of container</div>
<div>        layout.NewMaxLayout(),</div>
<div>        // first use btn color</div>
<div>        btn_color,</div>
<div>        // 2nd btn widget</div>
<div>        btn,</div>
<div>    )</div>
<div>    // our button is ready</div>
<div>    return container1</div>
<div>}</div>
<div>// Blue button</div>
<div>// copy previous button code and change it</div>
<div>func blue_button() *fyne.Container { // return type</div>
<div>    btn := widget.NewButton("Visit", nil) // button widget</div>
<div>    // button color</div>
<div>    btn_color := canvas.NewRectangle(</div>
<div>        color.NRGBA{R: 05, G: 0, B: 255, A: 255})</div>
<div>    // container for colored button</div>
<div>    container1 := container.New(</div>
<div>        // layout of container</div>
<div>        layout.NewMaxLayout(),</div>
<div>        // first use btn color</div>
<div>        btn_color,</div>
<div>        // 2nd btn widget</div>
<div>        btn,</div>
<div>    )</div>
<div>    // our button is ready</div>
<div>    return container1</div>
<div>}</div>
<div>// Green button</div>
<div>// copy and paste previous button</div>
<div>func green_button() *fyne.Container { // return type</div>
<div>    btn := widget.NewButton("Visit", nil) // button widget</div>
<div>    // button color</div>
<div>    btn_color := canvas.NewRectangle(</div>
<div>        color.NRGBA{R: 0, G: 255, B: 0, A: 255})</div>
<div>    // container for colored button</div>
<div>    container1 := container.New(</div>
<div>        // layout of container</div>
<div>        layout.NewMaxLayout(),</div>
<div>        // first use btn color</div>
<div>        btn_color,</div>
<div>        // 2nd btn widget</div>
<div>        btn,</div>
<div>    )</div>
<div>    // our button is ready</div>
<div>    return container1</div>
<div>}</div>
<div>// button with image as background</div>
<div>func img_button() *fyne.Container { // return type</div>
<div>    btn := widget.NewButton("Visit", nil) // button widget</div>
<div>    // img button color</div>
<div>    img := canvas.NewImageFromFile("c:/cartoon/blue-bg.jpg")</div>
<div>    // container for colored button</div>
<div>    container1 := container.New(</div>
<div>        // layout of container</div>
<div>        layout.NewMaxLayout(),</div>
<div>        // first use btn color</div>
<div>        img,</div>
<div>        // 2nd btn widget</div>
<div>        btn,</div>
<div>    )</div>
<div>    // our button is ready</div>
<div>    return container1</div>
<div>}</div>
</div>

 

[easy_media_download url=”http://blogvali.com/wp-content/uploads/fyne-golang-downloads/main44.go” text=”Download Code” color=”red_darker”]