Chapter 5: Widget Library and Themes

A large part of the Fyne toolkit is its library of standard widgets, which provides simple visual elements, manages user input, and handles application workflows. These widgets handle how information and user input is displayed, as well as container options for organizing the user interface and managing standard workflows. The themes that come with the Fyne toolkit support both light and dark versions, both of which support user color preferences while adapting all the user interface elements so that they look great in both modes.

In this chapter, we’re going to explore the widgets available in the Fyne toolkit and how to use them. We will be covering the following topics:

• Exploring the design of the Fyne Widget API
• Introducing the basic widgets
• Grouping with the collection widgets
• Adding structure with container widgets
• Using common dialogs

By the end of this chapter, you will be familiar with all the Fyne...

Technical requirements

This chapter has the same requirements as Chapter 3, Windows, Canvas, and Drawing – that is, you must have the Fyne toolkit installed and a Go and C compiler working. For more information, please refer to the previous chapter.

The full source code for this chapter can be found at https://github.com/PacktPublishing/Building-Cross-Platform-GUI-Applications-with-Fyne/tree/master/Chapter05.

Exploring the design of the Widget API

As we described in Chapter 2, The Future According to Fyne, its APIs are designed to convey semantic meaning rather than a list of features. This is followed on by the Widget definition, whereby we add APIs that describe behavior and hide the details of rendering. The interface that all widgets must implement is simply an extension of the basic CanvasObject object (introduced in Chapter 3, Window, Canvas, and Drawing), which adds a CreateRenderer() method. It is defined in the source code as follows:

// Widget defines the standard behaviors of any widget.
// This extends the CanvasObject - a widget behaves in 
// the same basic way but will encapsulate many child
// objects to create the rendered widget.
type Widget interface {
        CanvasObject
        CreateRenderer() WidgetRenderer
}

The new CreateRenderer() method is used by Fyne to determine how the widget...

Grouping with the collection widgets

In this section, we will look at widgets that are designed to efficiently contain main widgets. Some of the widgets mentioned in the previous section do this, such as Form and Toolbar, but collection widgets support thousands of items (though they’re not all visible at one time). These widgets are commonly used for displaying a huge numbers of options or navigating complex datasets.

Due to the requirement that collection widgets only show large amounts of data, they are designed to only show a small portion of the possible widget at a time. To do this, and to maintain great performance, they have a caching mechanism that makes their API a little more complex than the widgets we have seen previously.

Callbacks

Each of these widgets relies on a number of callback functions. The first of these functions will provide information on the dimensions of the data that the widget will display (for a more complete discussion on data, see Chapter...

Adding structure with container widgets

In Chapter 3, Window, Canvas, and Drawing, we learned how a Container is used to group multiple objects within a canvas. Using the layouts we explored in Chapter 4, Layout and File Handling, it is possible to automatically arrange each CanvasObject according to certain rules. However, sometimes, an application would like items to appear and disappear according to user interaction, or to have visual attributes beyond their size and position. Container widgets can provide these richer behaviors. These structural widgets can be found in the container package and include scrolling, grouping, and variations of hiding and showing content. Let’s explore each of these options (in alphabetical order).

AppTabs

The AppTabs container is used for controlling large areas of an application where the content should be switched out based on the current activity. For example, this may be used to fit lots of graphical elements into a small application...

Using common dialogs

During the user’s journey of an application, you will often need to interrupt the flow to present information, ask the user for confirmation, or to pick a file or other input element. For this purpose, toolkits usually provide dialog windows, and Fyne does the same. Instead of opening a new window, the dialogs will appear over existing content in the current window (which works well across all platforms as not all manage multiple window applications well).

Each dialog has its own constructor function (of the dialog.NewXxx() form) that create the dialog to be shown later using Show(). They also provide a helper function to create and show it (of the dialog.ShowXxx() form). The last parameter of all these functions is the window that they should be displayed in. All the dialogs also support setting a callback when the dialog closes. This can be configured using the SetOnClosed() method.

In this section, we looked at the different dialog helpers that...

Custom dialogs

Although the preceding dialogs should cover most of the reasons why you may wish to interrupt the user flow with a pop-up dialog, your app may have additional requirements. To support this, you can insert any content into a custom dialog so that the overall layout is consistent.

To construct a custom dialog, a new parameter and its content must be passed to the constructor function. Any Fyne widget or CanvasObject can be used in a custom dialog, which includes containers to provide more complex content. To illustrate this, we will use a TextGrid component:

content := widget.NewTextGrid()
content.SetText("Custom content")
content.SetStyleRange(0, 7, 0, 14,
    widget.TextGridStyleWhitespace)
dialog.ShowCustom("Custom Dialog", "Cancel", content, win)

The preceding code will generate a custom dialog, as shown here:


Figure 5.33 – A dialog showing custom content (a TextGrid)

...

Understanding themes

The themes within the Fyne toolkit implement the color palette, iconography, and size/padding values of the Material Design look and feel. The design of the theme API aims to ensure that applications feel consistent and deliver a good user experience while allowing developers to convey an identity and customization. All Fyne applications can be displayed in light or dark mode using built-in themes. We will look at these in detail next.

Built-in themes

Since more and more operating systems are supporting light versus dark desktop coloring, the Fyne theme specification supports both light and dark variants. By default, every app will ship with a built-in theme that provides both light and dark variants. This theme was illustrated extensively in the Introducing the basic widgets section earlier in this chapter, but to see how this all comes together, take a look at the following screenshot of a Fyne demo application that showcases widgets:

...

Implementing a task list application

To explore some of the widgets listed in the previous sections and how they can be brought together into a simple application, we will build a small task list. This application will show a list of tasks based on complete or incomplete state and allow the user to edit the details of each item.

Designing the GUI

First, we will piece together a basic user interface for the task application. It will contain a list of tasks on the left-hand side of the app and a collection of components that edit a task on the right-hand side. Above this, we will add a toolbar for other actions. Let’s get started:

1. The list of tasks will be a List widget that notifies the user when an item has been selected. The List widget will contain static content for this mock-up. Here, we will tell the list that there are a set number of items (for example, 5) so that it creates the correct number of items to display. We create a new check item each time the...

Summary

In this chapter, we learned how the Fyne Widget API is designed and looked at a list of standard widgets. We saw how containers and collection widgets can help us organize and manage user interface components. The dialog package was also explored to show how we can use it with our applications in order to implement standard components for common activities.

We also saw how themes are implemented within the toolkit and how they apply to all the widget components. This chapter demonstrated the light and dark variants of the standard theme and showed that applications can provide their own themes for a custom look and feel.

By building a task tracking application, we saw how many of the built-in widgets are used, how to lay them out in various containers, and how user interactions can be tracked to manage some in-memory data. In the next chapter, we will look at data binding and storage APIs, which can help us manage more complex data requirements.