Creating an App Builder

On this page you will find our series of videos demonstrating how to create a complete and compelling application using Fyne. These live-code videos are released monthly, be sure to subscribe to our YouTube channel to get notified as new episodes are published.

You can also follow along with the source code on our GitHub repository.

Series 2:

  • 3: Widget tree and about screen
  • 2: Mobile preview
  • 1: Adding and removing widgets

Series 1

Episode 3: Widget tree and about window

This video fills the gap where the “screens” panel has existed. We fill it with the screens found in the loaded project and insert the full widget hierarchy to be browsed – each container and widget in the window. Then we set up the handler so that selecting an item highlights the widget in the UI editor so the properties can be managed.

Lastly we add a new about screen for the project – with space for kind new sponsors. Consider donating to get your name in the window – fysion.app/sponsor.

Episode 2: Mobile preview

In this episode we explore how to switch between different previews of our app. Using the Stack container and manipulating the Objects slice we can hide and show panels to switch between device renderings. Then the editable theme definition is updated to control adjustments for a convincing mobile preview

We then spend some time on the mobile specific “decorations” required to make a realistic and good looking preview of an app running on a smart phone device. Using a combination of rectangles and corner radiuses we create the preview that is shown in the screenshot.

Episode 1: Adding and removing widgets

To start the second series of app creator videos we look at the widget panel and see how we can add and remove widgets from the user interface. Using the defyne library we are able to get a list of the known widgets so they can be presented to the user to select. Code is then added to make sure we are editing a container and the new widget is dropped into the parent.

We also look at deleting items, by searching for the parent container and updating the Objects to not include the selected widget. The screen then refreshes with that item gone and the garbage collector will free the memory used.