Designing cross-platform GUI apps with Fyne
Displaying a Data List
To complete the user interface, you need to define the main to-do list. The List
widget is ideal for this task, but it is a little more complex than the previously discussed widgets. List
is a "collection widget" (along with Table
and Tree
) designed to handle lots of data at high performance.
I will create a list using widget.NewList
. Rather than passing static data, widget.NewList
uses callbacks to understand how content should be displayed. The three callbacks it uses define the number of list items, how an item is created, and what data each row should contain. This more complex setup means that Fyne can reuse widgets as a user scrolls, which is much faster and more efficient for CPU and memory.
For now, I will use dummy content in the sample to-do list. It will display five items, and each one will show "TODO Item" (as the data for the third callback doesn't yet exist to display). For each row in List
, I use a Check
widget to give each item a checkbox, which will allow users to mark completed items and display the associated text. This code, together with the earlier items, comprises the entire user interface. For simplicity, the graphical setup code is moved into a new function called loadUI
as shown in Listing 4.
Listing 4
ui.go
01 package main 02 03 import ( 04 "log" 05 06 "fyne.io/fyne/v2" 07 "fyne.io/fyne/v2/container" 08 "fyne.io/fyne/v2/theme" 09 "fyne.io/fyne/v2/widget" 10 ) 11 12 func loadUI() fyne.CanvasObject { 13 list := widget.NewList( 14 func() int { 15 return 5 16 }, 17 func() fyne.CanvasObject { 18 return widget.NewCheck("TODO Item", 19 func(bool) {}) 20 }, 21 func(id widget.ListItemID, o fyne.CanvasObject) { 22 }) 23 24 input := widget.NewEntry() 25 input.SetPlaceHolder("New item") 26 add := widget.NewButtonWithIcon("", 27 theme.ContentAddIcon(), func() { 28 log.Println("new item tapped") 29 }) 30 head := container.NewBorder(nil, nil, nil, add, input) 31 32 return container.NewBorder(head, nil, nil, nil, list) 33 }
Launching the GUI
Because the code is now in the loadUI
function, you also need to update the main
function to set the content to be the result of calling loadUI
.
A list can be very small, but you want to see multiple items at the same time. To do this, you call Resize
on Window
with a suitable size (not pixels because a Fyne size will be the same across different output devices). The last three lines of the main
function become:
w.SetContent(loadUI()) w.Resize(fyne.NewSize(200, 280)) w.ShowAndRun()
When you run the updated code, you will see the new user interface appear on your screen (Figure 2).
Remembering To-Dos
You want to be able to add items and mark them as done in your app. To do this, you will use a new global variable, todos
, which is a slice of strings (denoted as []string
). You will manipulate this slice when adding or deleting items, and your list will always draw this data's current state. First, you add a new todos
variable to main.go
. You also need to keep a reference to the list
variable created earlier so it can be updated (shown in Listing 5).
Listing 5
Storing Data
var ( todos []string list *widget.List )
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
![Learn More](https://www.linux-magazine.com/var/linux_magazin/storage/images/media/linux-magazine-eng-us/images/misc/learn-more/834592-1-eng-US/Learn-More_medium.png)
News
-
NVIDIA Released Driver for Upcoming NVIDIA 560 GPU for Linux
Not only has NVIDIA released the driver for its upcoming CPU series, it's the first release that defaults to using open-source GPU kernel modules.
-
OpenMandriva Lx 24.07 Released
If you’re into rolling release Linux distributions, OpenMandriva ROME has a new snapshot with a new kernel.
-
Kernel 6.10 Available for General Usage
Linus Torvalds has released the 6.10 kernel and it includes significant performance increases for Intel Core hybrid systems and more.
-
TUXEDO Computers Releases InfinityBook Pro 14 Gen9 Laptop
Sporting either AMD or Intel CPUs, the TUXEDO InfinityBook Pro 14 is an extremely compact, lightweight, sturdy powerhouse.
-
Google Extends Support for Linux Kernels Used for Android
Because the LTS Linux kernel releases are so important to Android, Google has decided to extend the support period beyond that offered by the kernel development team.
-
Linux Mint 22 Stable Delayed
If you're anxious about getting your hands on the stable release of Linux Mint 22, it looks as if you're going to have to wait a bit longer.
-
Nitrux 3.5.1 Available for Install
The latest version of the immutable, systemd-free distribution includes an updated kernel and NVIDIA driver.
-
Debian 12.6 Released with Plenty of Bug Fixes and Updates
The sixth update to Debian "Bookworm" is all about security mitigations and making adjustments for some "serious problems."
-
Canonical Offers 12-Year LTS for Open Source Docker Images
Canonical is expanding its LTS offering to reach beyond the DEB packages with a new distro-less Docker image.
-
Plasma Desktop 6.1 Released with Several Enhancements
If you're a fan of Plasma Desktop, you should be excited about this new point release.