To load the first window of a Fyne application, we must create a new application instance using app.New(). After that, we can call the NewWindow() function on this application object. The returned fyne.Window object allows us to control the window on screen and to set its content:

import "fyne.io/fyne/app"

func main() {
   mailApp := app.New()
   browse := mailApp.NewWindow("GoMail")

   ...
}

Next, we will create the required widgets for our GUI. This starts by adding the widget import line, and then we add the declarations to the main() function created previously. A toolbar is added using widget.NewToolbar() (we will add items to it later). For the email list on the left, we create a new titled group using widget.NewGroup() with the title Inbox. Into this group we add placeholder labels using widget.NewLabel().

Then, we create new labels for the content and subject of the email to display. We set the text of the subject label using a fyne.TextStyle declaration. Lastly, we set up the grid layout for our email metadata using widget.NewForm(). A form widget matches our design of where we list rows with a bold text label next to the widget it describes. To the form, we append the To, From, and Date items, shown as follows:

import "fyne.io/fyne/widget"

func main() {
   ...

   toolbar := widget.NewToolbar()
   list := widget.NewGroup("Inbox",
      widget.NewLabel("Item1"),
      widget.NewLabel("Item2"),
      widget.NewLabel("Item3"),
   )
   content := widget.NewLabel("Content")
   subject := widget.NewLabel("subject")
   subject.TextStyle = fyne.TextStyle{Bold:true}

   meta := widget.NewForm()
   meta.Append("To", widget.NewLabel("email"))
   meta.Append("From", widget.NewLabel("email"))
   meta.Append("Date", widget.NewLabel("date"))

   ...
}

Now that we have defined all of the widgets, we need to lay them out appropriately. In Fyne, we typically use a fyne.Container object and optionally pass a layout to control how it is set up. There are also some helper widgets that provide easier-to-use APIs, such as widget.NewVBox() used in the following section (that sets up a container where items are arranged in a vertical list).

In both containers in this code snippet, we are using BorderLayout. When calling layout.NewBorderLayout(), we pass the objects that should be positioned in the top, bottom, left, and right positions of the layout (or nil if they are to be left empty). Any items that are included in the container not listed in a particular position will be arranged to fill the center of the layout, taking up all remaining space. Remember that items to be placed in one of the border sections should also be passed into the fyne.NewContainerWithLayout() function as subsequent parameters, as this controls which objects will be drawn within the container. Refer to the following section to see how subject and box are passed to the layout as well as the container, as we wish them to be positioned by the layout and drawn by the container.

In the first container (detail), we've set the subject label to stretch along the top and the box containing our metadata and content to be left-aligned within the container. The following container (container) is our overall application layout and it positions the toolbar at the top, the email list on the left, and the detail container fills the remaining space for the layout (since it is not specified as a border parameter):

import "fyne.io/fyne"
import "fyne.io/fyne/layout"

func main() {
   ...

   box := widget.NewVBox(meta, content)
   detail := fyne.NewContainerWithLayout(
      layout.NewBorderLayout(subject, nil, box, nil),
      subject, box)
   container := fyne.NewContainerWithLayout(
      layout.NewBorderLayout(toolbar, nil, list, nil),
      toolbar, list, detail)

   ...
}

With all of the containers and layouts defined, we need to complete the window by setting its content and optionally specifying a size. You may not have to call the Resize() function on a window—its default size will be the appropriate size to fit all of the widgets and containers at their minimum size.

Finally, we call ShowAndRun() on the window, which will cause the window to appear and the application's main loop to start. Any subsequent windows can simply call Show() (since an application should only start once):

   ...
 
   browse.SetContent(container)
   browse.Resize(fyne.NewSize(600, 400))
   browse.ShowAndRun()
}

Running the preceding code (which can be found in the source code repository for this book) should result in a window much like the following: