Gallery App In Go and Fyne

In this article, we’ll learn how to make an image viewer.

Let us go step by step and grab our snippet from fyne.io to see how we
can create our first app

.
While building this application we only require our app, and window from
the above syntax.

Now, what do we mean by making a gallery app?

We will simply build an app prompt in which we’ll provide a path of our
folder where we have stored our photos, further we’ll instruct our GO to
read that particular directory, and show us the images that are available
in that directory.

First, we’ll create a path towards a directory which we’ll be reading.

Now we’ll copy our path for pictures which we want to show.
For that go to the folder you want to read, right-click inside the folder ->
select “properties” -> then click on location -> copy the path from the
location and paste it inside our code editor.

For syntax, we’ll search “read the directory in go” in google. And take the
help of the code from there.
For the exact link click here.
 We already have a package main, import function, and main function
available to us.

We will copy the three import files and paste them into our import
function. Then we will copy the main function and paste that into our
main function as well.

Let us see what will be the use of each line:

We imported “io/ioutil”, this particular line will help us read the directory,
and return two things i.e. files and errors.
If there is some error present while reading the directory then we will log
that error.

If there is no error present while reading the directory then we will run a
loop on the range of all the files that are available in the directory. Next,
we will print the file name and whether the file is a directory or not.
 Now the output of this particular code will give us the “true” and “false”
values. The files which are in folder form will give us true as output and
the ones which are just single images will give us false as output.

Now we want to work only when our directory is giving false value, i.e.
we just want to display the files which have some kind of extension
attached to it be it .jpg, .jpeg, .png, etc. For that, we’ll keep a checker.
I.e. an if condition.

As y’all must’ve seen already, that the names of our files are split by a
dot(.) and then there’s an extension of that file.
For example pepcoding.PNG

Similarly, we need to split the command after the dot(.) and add an
extension to it in our code.
Since we are using strings here we will import the “string” library as well.
Notice how I’ve written [ 1 ] at the end, you must be curious about what’s
that for ???

The [ 1 ] at the end denotes that, we are getting an array because of our
split function and we have to start our array from index 1. I.e from our
first image itself.

Next, we have to write a condition for our extensions…???

Here I only wrote two extensions, you can write as many as you want as
per your files and their extension format.

Now, what is remaining?

We have to open our images using fyine, that’s all!

For that, I’ll suggest you do a Lil hovering around the internet and find
the appropriate syntax. If you don’t get what you want then click here to
find the sample code for reference.

From this code, we’ll use some libraries and another syntax to open our
images.

Inside our, if condition we will create a variable called “image” and then
take files from the source and store it inside our image variable using the
following syntax:
For this, we’ll be needing to import the canvas library as well, don’t forget
to do that.

Now, what if we want our images in different tabs, for that we’ll set a
container in our tab outside the for loop.

After creating the container for our tabs we’ll append it and will pass the
file name(), and our images in it.

Now we’ll set our tabs inside the window.

After completing our program till this we will have our gallery app looking
like this:

If you want to resize your app, then you can use the following command:
 You can also use image.Fillmode commands to explore different
dimensions of images such as:

Now as you can see on page number six, the location of our tab is at the
top of our prompt app/container. If you want to change that then you can
set them in whatever way you want:
For example, if you want to set your tab location at the leading side, i.e.
on the left-hand side of your window then you can use the following
command:

After applying the above modification our gallery app will look like this:

Here is our final code for creating a Gallery App:

package main
import (
"fmt"
"io/ioutil"
 "log"
"strings"
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/app"
"fyne.io/fyne/v2/canvas"
"fyne.io/fyne/v2/container"
)
func main() {
a := app.New()
w := a.NewWindow("Hello")
w.Resize(fyne.NewSize(720, 360))
root_src := "C:\\Users\\lenovo\\Pictures"
files, err := ioutil.ReadDir(root_src)
if err != nil {
log.Fatal(err)
}
tabs := container.NewAppTabs()
for _, file := range files {
fmt.Println(file.Name(), file.IsDir())
if !file.IsDir() {
extension := strings.Split(file.Name(), ".")[1]
if extension == "jpeg" || extension == "PNG" {
image:=
canvas.NewImageFromFile(root_src+"\\"+file.Name());
image.FillMode = canvas.ImageFillStretch
tabs.Append(container.NewTabItem(file.Name(), image))
}
}
}
tabs.SetTabLocation(container.TabLocationLeading)
w.SetContent(tabs)
w.ShowAndRun()
}
You can find the same article in lecture form on our youtube channel.

For the YouTube video link of “Gallery App in Go and fyne” - click here

!!! We hope you found this article helpful !!!

For more free study resources and information about the courses, visit:

PepCoding | Online resources of data structure and advanced algorithms