Flutter - 08. Displaying a Button (Part 1)

When learning about interaction, the simplest example is probably a button.

So in this session, we'll build an example where clicking a button displays a penguin image.

The examples are organized by difficulty:

1. Loading an image file from within the project
2. Loading an image from the internet
3. Loading an image from the internet with automatic caching

We'll learn through these three approaches.

1. Loading an Image File From Within the Project

![](

cGRAqZkqEmaagUlZrcg.kJYuxy1MHQbNx46Z0_mhtDWf_MsJugAeN7jQVVCM_BAg.PNG.cdw0424/image.png?type=w966)

First, let's create a new Flutter project.

Flutter - 02. Creating a Project and Running the Emulator

If you don't remember how to create a project, refer to the previous session post above.

![](

mmEJKY6L66I1GCgbNcg.iXGZ0OQXll51x-P_OOlCrUbyGo0Rfh-EL-lI3pbPDC4g.PNG.cdw0424/image.png?type=w966)

Now let's look at the main.dart file that Flutter generates by default. It's complex, so we'll delete the bulk of it.

![](

naOIh1TIsUctX9eaoIg.IKqgp87XrY0ZWkwCtxaOk2OashFhTV6aD5S1G-ytJvEg.PNG.cdw0424/image.png?type=w966)

Since we need to use Material Design, let's import it.

![](

8t0tZ7tE-3CresH8f8g.-C5rMWLFXeXdG3ljWuUQWHBUCUPlBS89CQEoPeF5R6cg.PNG.cdw0424/image.png?type=w966)

Write the main function and create a StatelessWidget called PengsooApp().

![](

-CBTCUqIFom1IZAQugg.uNZaBXQ4OiOIDB8vb5gordP4V6VSTK0MkBT-D9q6yHkg.PNG.cdw0424/image.png?type=w966)

Now create the actual StatelessWidget class with that name.

(We used a StatelessWidget because we're just drawing a simple background without any interaction.)

![](

V-Jgcr-n_hmaFbZ3zgg.Pv958pUbX3zk9MfHrLHsGwKd56-usAgA7sau8x_uzkkg.PNG.cdw0424/image.png?type=w966)

Here we have a Container widget, which is a layout type that sets positioning.

For now, just think of it as a tool for creating frames of the desired size — we'll cover this properly next time since we're focusing on feature implementation for fun right now.

Since we won't be using it, let's delete it.

![](

ExcVOnWVd9qP4CMPscg.W9f3jsbsjLgknufi42QSfOCbYOq6-K8ZdYYs8uuco8cg.PNG.cdw0424/image.png?type=w966)

Since we'll be using Android's Material Design, let's create a MaterialApp widget there.

Set the title appropriately, and to see what else you can input, press Ctrl + Space to review the list. Then add home, which is where the main content goes.

![](

ExcVOnWVd9qP4CMPscg.W9f3jsbsjLgknufi42QSfOCbYOq6-K8ZdYYs8uuco8cg.PNG.cdw0424/image.png?type=w966)

Since we don't have a background, let's create a Scaffold widget to draw one.

![](

f_YIUjbbwOwU3oZj_sg.PoCML2FQJXS3OE8VIIBfHb9loYYUldhUx20Qg8ush1cg.PNG.cdw0424/image.png?type=w966)

Now that we have a background, let's add an AppBar to make it look presentable and put some text in the appBar variable.

![](

SWzGLl1ZHgP6nh799wg.StNeh5TxnORIMJAqzYflIb3aV5y6PMkyNVHT2m16uOwg.PNG.cdw0424/image.png?type=w966)

If you type text directly into appBar, you'll get an error.

![](

c3iZGmqX6yDyrdliy4g.gahs4rAS8Q-1CuO-bogNl37FrXeeMiKwMUVAqYel5Vcg.PNG.cdw0424/image.png?type=w966)

So I Ctrl-clicked on the appBar section to check the definition and see the data type — it's not a String but a Widget (class).

So we need to create an AppBar widget and pass it in.

![](

uns2hJL0ZVEz545Ny4g.-pzUxJEnjssV3qKOzmJpX5yEr3RWHTfo7PTKc0fTg-Eg.PNG.cdw0424/image.png?type=w966)

Created the AppBar and

![](

KxzWFi1QMiBT5oNXYkg.AsUGGFqwfCa0A6TnCTx-E202iwnMvbwqvNEDVyj2tNog.PNG.cdw0424/image.png?type=w966)

I typed text directly into the title variable but got an error.

![](

CytJrpzppWLhMmlxCYg.YaXfFx7saqZq-csjesmOgbUOsaO2ln3P8npqdMpi4cMg.PNG.cdw0424/image.png?type=w966)

Checked the data type again and confirmed it's a Widget, so text must be provided in widget form.

![](

WUntvkSTdysmn_3_5gg.3fL8B0P1xAfqBmrsi-sCZDdNpxYp9vQD0-HONqkURqIg.PNG.cdw0424/image.png?type=w966)

Providing text in widget form works.

![](

e7He3vrdjyt47kNoKAg.VP_Gvd2xA6jVzxUGGzxj0nEZ8vIMmqMi-4u_uRQsL1gg.PNG.cdw0424/image.png?type=w966)

By the way, there's an easier method than opening the class directly — hold Ctrl and hover your mouse over it, and you'll see the type information appear after a moment. Use whichever method you prefer.

![](

byYGJqk05qjIA52fROQg.PRBiDoOfwDPV-CVI8KPIYVFNAty_g_pDp9ZgBza4BjUg.PNG.cdw0424/image.png?type=w966)

The app background looks good, but the AppBar color is too bland.

Let's change the AppBar color to yellow — matching Pengsoo's headphone color.

![](

MQvp5QgCdXfViZc0yYg.2cAC930L8Exwgxjfe4hI638h7SUaI8rQ41FUJIHx7-8g.PNG.cdw0424/image.png?type=w966)

Changed it, but now the text is hard to read.

Let's change the text color to black.

![](

hxB4W5FU6UsDJ4pDCcg.QkRHH4iOtyJauhpEAD23NmZBK7oXBM0bAKPlJ6mX1zMg.PNG.cdw0424/image.png?type=w966)

There's a variable in the Text widget that lets you set the style.

The style variable is of type TextStyle.

![](

8OvfcYWaYd1xN2TbOIg.2qnAyyFVVKAdrGapthykog8Tdn8PmRYE-DFkCUgAA3kg.PNG.cdw0424/image.png?type=w966)

And since the TextStyle class has a color property, you can change the color through the Text widget.

![](

lU3MDIV6OxlZwwtucgg.EHFr0BoIN4hi-M0t_KqfLDdY_eOW6Ftoavz0Z1UJy8Mg.PNG.cdw0424/image.png?type=w966)

So if you write it like this

![](

IB1rlkZzvzpwFyGxhog.zdzAMlvH1egqcJ6KUgetUDroV5jhXLIBwNHKAa0z-CQg.PNG.cdw0424/image.png?type=w966)

the text renders in black properly.

Let's also make it bold.

![](

JPX8N5HCTV3JElI-mUg.ck8gR9_y1F2xQ__EHLsYeP2ZB6By8-H6o5594FuoIT4g.PNG.cdw0424/image.png?type=w966)

But there's no Bold option in fontStyle.

In cases like this, let's Google it.

![](

F_lND4PLKrzlSWdq_8g.uIIOOHNMKf1RyEPpsOazDpwY38432mAVU-1LRFsAfA8g.PNG.cdw0424/image.png?type=w966)

Searching "bold font" in the official Flutter docs reveals it's inside a class called FontWeight.

![](

6CcSz2Peqp960AK1oEg.YvvLnGsCezdrLygyB5L_Yrbq67Zj4fwmkw_LavabqMEg.PNG.cdw0424/image.png?type=w966)

Writing it as shown renders the text bold as desired.

By the way, you might be wondering why we didn't use the new keyword before classes like Colors or FontWeight.

That's because they're static variables — they always exist in memory and don't need to be instantiated.

Of course, if you try using the new keyword, Android Studio will throw an error, so no need to worry about it.

And just to reiterate — in Dart, the new keyword isn't required, but I personally prefer using it since it makes it easier to distinguish between functions and classes.

This post is getting too long, so I'll continue in the next one...