Learn

We’ve learned how to display text, but what about basic images? Displaying a simple image is the role of the Icon Widget.

Icons are only for display purposes and cannot respond to user input such as tapping or clicking. We would need a different widget for that, an IconButton. In this exercise, we will focus on the use of Icon Widgets for decorating our app.

This widget only has a single constructor. These are the most important constructor parameters:

The first and unnamed parameter (Required): Specifies which of the predefined list of Icons should be displayed, such as Icons.favorite.
color (Optional): Specifies which Flutter color the Icon should be.
size (Optional): Specifies how big the Icon should be, in pixels.

The code below creates a red icon that displays a clock and has a size of 24 pixels. It assigns the icon to variable myIcon.

const myIcon = Icon(
  Icons.check,
  color: Colors.green,
  size: 100.0,
);

We could include the Icon by making it the body Widget of our Scaffold.

Scaffold(body: myIcon)

Instructions

Replace the Text in our application with an Icon with the picture, color, and size of your choice.

Since you’re removing the Text, you can also remove the TextStyle variable.

Hint

Replace the Text widget:

Text(
  'Codecademy: Flutter Edition',
  style: myTextStyle
)

with the Icon widget:

Icon(
  Icons.check,
  color: Colors.green,
  size: 100.0
)

Solution

The inside of main will look something like:

  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Icon(
          Icons.check,
          color: Colors.green,
          size: 100.0
        )
      )
    )
  );

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?