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 ) ) ) );