Flutter - 09. Button Click to Display Image (Part 2)

Continuing from last time.

For the previous content, please refer to the link below!

I want to place a button and image below the AppBar — but which widget should I use?

I searched "button widget" in the Flutter official docs and found several classes.

Since I didn't know which was which, let's start by looking at the FlatButton class that appeared first.

Reading the documentation, I can see it's a button with no elevation — just a text label visible, and when pressed, the design fills with color.

The sample on the right doesn't look like what I had in mind, so let's open the RaisedButton class docs next.

Looking at the doc sample, this seems to be the button I want.

Let me check the body text too.

This button is raised, and when clicked, the design appears to elevate again.

This looks like the design I'm after, so let's work with it.

Source code is provided for each example, so you could just copy-paste, but I'll use the basic button.

When you actually try it, the button appears immediately.

And it looks like I need to put a function in the onPressed section to activate the button.

Writing and providing a function activates the button like this.

I added an underscore ("_") before the function name to set the access level so it's only accessible within the current page.

If this doesn't make sense yet, just skip it for now.
(Additionally, in Dart you can pass a function as a parameter without using parentheses.)

But there's actually something strange here.

If you've been following this series closely, you'd know this is a Stateless widget — so why is there no problem writing an interactive button?

The reason is that Scaffold inherits from a Stateful widget.

So Scaffold naturally performs the role of a Stateful widget as well.

However, since we need to add an image alongside this button, we'll create another Stateful widget later and insert it.

And since we need an image in addition to this button, let me wrap the button in a layout.

Since we're arranging widgets vertically, let's wrap them in a Column.

Instead of writing everything manually, for convenience and productivity — click once on the widget you want to include in a layout, then press Alt + Enter, and it will automatically be wrapped in your desired layout.

And in this session, we'll be using the function we created earlier, so let's put it inside the class.

Now we need to implement the feature where clicking the button displays a Pengsoo image. This requires an image widget and some logic.

Let's pre-save the path of the image to load.

So how do we load an image?

It's simple. If you don't know, just search for it.

I went to the docs and searched "load image" and found a post about Adding assets and images.

Reading through, it says you can include assets in a Flutter app and load them at runtime.

So if you have an image file, you can load it.

Scrolling down a bit, the pubspec.yaml file section explains that you need to register the files so they can be recognized.

And since we can see this directly in Android Studio, let's add it.

The docs say to write it under flutter: in the assets: section.

Scroll down and you can find the assets section hidden in the comments.

Uncomment it, delete the default content, and going back to the main script — it says to use an Assets folder under the flutter: section, so let's tell it to use that folder.

You can write the path freely though.

Writing "Images/" just means "a folder containing images" — no problem.

The key thing to note is that assets: must be aligned with the # and the line above it.

Now in the main script, put "Assets" as the path — the folder where images are stored — and add "/" at the end to use all images in the folder.

Now navigate to the project and right-click to create a directory to make the actual path.

Name the folder the same as what you specified.

Then you'll have this folder.

Download a suitable Pengsoo image from the internet and name it to match the path.

Then drag and drop it into the folder to prepare.

Then go back to main.dart.

The pubspec file has been modified.

Click "Get dependencies."

If it shows this, you're good.

And read the documentation again.

To load an image, use the AssetImage class as per the docs.

Examples are also provided, so just follow along.

Since we're displaying an image, first create an Image widget and use the AssetImage class to load it.

The path is the variable we created earlier.

Run it and you can see the Pengsoo image.

Now let's make the image appear when the button is clicked.