Flutter - 10. Loading Images from the Network

Last time we loaded an image from local storage, so this time let's load one from the internet.

First — where do images on the internet actually live? They exist on server computers. Since we usually browse images through a browser, you might mistakenly think the images live in the browser itself. In reality, images are stored on server computers, and the browser's job is simply to fetch and display them.

So loading an image works the same way a browser does — fetching a file from a server computer. The word "server" might sound intimidatingly complex, but as I mentioned, it's just a computer.

So just like finding a file's location on your own computer, if you know the file path, you can do the same thing. You just need the path to the image stored on the server computer.

This is commonly called a URL. Of course, it looks slightly different from the paths we're used to — with protocols, domains, ports, paths, etc.

Going too deep would be endless, so just think of it as a file's unique location.

Let's get into the actual coding. Among the data we've gathered, looking at how to load an image directly from a URL, the basic approach is to use the Image.network() constructor.

Let's get the URL of a Pengsoo image we need. Search for Pengsoo on Google Images, select the image you want, right-click on it, and copy the image address. Be careful not to confuse "Copy image address" with "Copy link address."

Going back to the code, copy the function we created earlier, modify the name, and clear the path. Then paste the copied URL into the path location. And let's change the button to execute this function.

Also, let's change the existing image constructor to one that loads from the network. (By the way, if the term "constructor" feels weird, you can think of it as "redrawing the widget.")

Run it and press the button — done! But ending here wouldn't be fun, so let's do one more thing. When you click the button, you might notice a brief moment while the image loads. With a small image like this, it's not an issue, but for larger files it could take quite a while. In that case, if the screen is empty without a loading indicator, the user can't tell whether it's loading or broken. So let's add a loading animation.