Widgets in the Fyne toolkit are designed for a clean and pleasant user interaction, following a standard theme and supporting rapid app development, solid testing and easy maintenance. There are various design considerations that promote that ambition, we explore them in this page.

Behaviour API

One thing that you will notice about the standard widgets is that the API is all about behaviour and state - but very little that controls the actual look of an element. This is by design. It enables our code, and that of app developers, to focus on the behaviour of a widget so that it’s rendering process can be left to other code. This makes it much easier to test, in fact full applications can be run through unit tests in memory without ever having to render the app.

You can extend an existing widget to add new behaviours without needing to worry about how it is rendered. It is also possible to write your own components, an application is not limited to using the provided widget set. When building your own widget you will notice that the rendering details are completely separate from the state - this is part of the design mentioned above. A WidgetRenderer (the code that renders a Widget) typically holds a reference to the widget that it will be rendering to access state or other information. When a widget state changes then Refresh() is called - the renderer will then be asked to refresh and it should update the display to reflect the new state. Custom widgets are recommended to use the current Theme but can choose to specify thier own sizes, colours and icons where that seems desirable.

Content Padding

The standard widgets use the theme specified padding to make appropriate space around their graphical components. The widget package uses a standard height and baseline to ensure that provided layouts will align well by default. If you are building a custom widget it is recommended to follow these guidelines.

The value of theme.Padding() is used in layouts to space elements of a container, it creates a consistent space around the various parts of an application. Some widgets, however, have content that should be inset from the edges of the extents. Consider Entry, It has a background and a border that go out to the edges, but its content should be inset. And so we have standardised the amount of spacing used to inset so that alignment matches.

The standard inset, or content padding, of a widget is defined as theme.InnerPadding(). The standard value of padding is 4 and the inner padding is 8. You can see in Label and Entry how the (text) content is inset by this much so that their content will align horizontally and vertically when placed next to each other.

It is recommended that custom widgets include similar dimensions so that they fit well alongside the standard widgets.