Chapter 7: Building Custom Widgets and Themes

Over the course of the previous chapters, we have seen a lot of functionality that comes as part of the Fyne toolkit. Many applications will, however, benefit from components or functionality that are not included as standard. To be able to support an easy-to-use toolkit API and at the same time support additional functionality, the Fyne toolkit provides the ability to use custom code alongside regular widgets.

In this chapter, we will explore how custom data can be used in a Fyne app, and how custom styling can be added using code or by loading custom themes.

In this chapter, we will cover the following topics:

• Extending existing widgets
• Creating a component from scratch
• Adding a custom theme

At the end of the chapter, we will see how to make use of the custom widget and theme capabilities to create an app that presents a conversation history that could be used for various instant messenger protocols. It...

Technical requirements

This chapter has the same requirements as Chapter 3, Windows, Canvas, and Drawing: you will need to have the Fyne toolkit installed and a working Go and C compiler. 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/Chapter07.

Extending existing widgets

The standard widgets that we explored in Chapter 5, Widget Library and Themes, all have minimal APIs to define commonly required functionality. To support the addition of more advanced functionality, each Fyne widget can be extended by application developers. In this section, we will see how widgets can be enhanced by overriding their existing functionality or adding new behavior.

As we can see in the following diagram, extended widgets, as well as custom widgets, can be included in a container alongside standard widgets and canvas objects:

Figure 7.1 – Extended and custom widgets can be used alongside standard elements

An extended widget will embed an existing widget and provide replacement, or enhanced, functionality around it. Custom widgets, which we will see later in this chapter, implement the complete Widget interface, and so are not constrained by the designs of a standard widget.

Building custom widgets offers...

Creating a component from scratch

Instead of building a new component by extending an existing widget, as we did in the previous section, we could build one from scratch. Any component that implements the fyne.Widget interface can be used as a widget in a Fyne application. To ease development, there is a widget.BaseWidget definition that we can inherit from. Let's start by defining the behavior of a new widget—the three-state checkbox.

Defining widget behavior

The API of a Fyne widget is based on behavior rather than how it looks. To begin our widget development, we will therefore define the states that our three-state checkbox can take and how a user can interact with it. We will create threestate.go and start coding:

1. Firstly, we must define a new type, CheckState, which will hold the three different states of our new checkbox widget. As we are building a reusable component, it is a good idea to export the types that are required, such as CheckState and the...

Implementing a chat app user interface

A common example of graphical applications, especially in a mobile context, is the messaging app. Although there are many messaging apps now, they often share the design of colored textboxes scrolling back through time. They are also either left or right aligned (with some padding for emphasis) to show incoming messages as distinct from outgoing. In this example, we will implement the message component to show text in this way and apply a custom theme to give the app an identity.

Creating a message widget

We start with the message widget that is used to display a single message. Each message will have a body of text and the name of the person who sent the message. Using the sender name, we can determine whether the message is outgoing. To begin, we define a custom Widget type that will hold this data in a new file, message.go:

1. To create a custom widget, we define a new type, named message, that extends widget.BaseWidget. We add to...

Summary

In this chapter, we have seen how to deviate from the standard components and built-in theme in various ways. We explored how existing widgets can be extended and adapted, as well as how to build our own components from scratch. We also saw how custom themes can be created and how we can apply our own customizations to the default theme through theme extension.

With this knowledge, we created an application that was a mix of standard and custom components. We added some visual enhancements through our widget's renderer, but also created further customization by defining a custom theme. Through the code in this chapter, we learned how to customize individual elements and widgets, as well as how to make visual changes that apply across custom and standard widgets, using the theme API.

This brings us to the end of our exploration of the Fyne toolkit APIs and their functionality. In the following chapters, we will see how to create and manage GUI applications and how...