Icons are a commonly used element in user interfaces, as they can effectively communicate meaning and add visual interest. They can be used in place of text, such as for a home icon or a share icon, and can also be used in conjunction with the text to add visual appeal.
In this post, we will explore a few examples of how to use icons in Flutter to enhance your app’s user interface. Whether you are looking to replace text with icons or simply add some visual flair to your app, you’ll find some useful tips and techniques here. So let’s dive in and take a closer look at how to use icons in Flutter!
All of the code examples provided in this post were written in Android Studio, and the accompanying images were taken from the Android emulator.
Simple use of an icon in Flutter
To use an icon in Flutter, you can use the Icon widget. Here is an example of how to use the Icon widget to display a simple heart icon:
Icon(
Icons.favorite,
color: Colors.red,
size: 24.0,
)The Icon widget takes in several optional parameters, such as the color and size of the icon. In this example, we are setting the icon’s colour to red and its size to 24 pixels.
Here is the basic code for the icon. This example doesn’t show any of the additional parameters. In this case, the result will be a small black icon with a default size.
Icon(
Icons.favorite,
)Icon as IconButton in Flutter
You can also use the IconButton widget to create a button that displays an icon. This is useful if you want to create a button with an icon that the user can interact with, such as a “like” button with a heart icon. Here is an example of how to use the IconButton widget:
IconButton(
icon: Icon(Icons.favorite),
onPressed: () {
// code to execute when button is pressed
},
)The IconButton widget takes in an icon parameter, which is the icon to display, and an onPressed parameter, which is a callback function that is executed when the button is pressed.
What are the basic Icon parameters in Flutter?
The Flutter Icon widget has several optional parameters that you can use to customize its appearance and behaviour. Here are some of the basic parameters that you can use with the Icon widget:
color: This parameter allows you to set the colour of the icon. It takes in aColorobject.size: This parameter allows you to set the size of the icon. It takes in adoublevalue representing the size in logical pixels.semanticLabel: This parameter allows you to provide a semantic label for the icon. This is useful for screen readers and other assistive technologies, as it allows them to describe the icon to the user. It takes in aStringvalue.textDirection: This parameter allows you to specify the directionality of the icon. It takes in aTextDirectionobject, which can be eitherTextDirection.ltr(left-to-right) orTextDirection.rtl(right-to-left).
Here is an example of how you can use some of these parameters to customize the appearance and behaviour of an icon:
Icon(
Icons.favorite,
color: Colors.red,
size: 24.0,
semanticLabel: 'Heart icon',
textDirection: TextDirection.ltr,
)How to use colour in Flutter
To use colour in Flutter, you can use the Color class. There are several ways to create a Color object, but one of the simplest ways is to use one of the predefined colours in the Colors class.
For example, here is how you can use the red colour in the Colors class:
Container(
color: Colors.red,
child: Text('Hello World'),
)You can also use the Color class to create a custom colour by specifying the red, green, blue, and alpha (opacity) values of the colour. Here is an example of how to create a custom colour using the Color class:
Container(
color: Color.fromRGBO(255, 0, 0, 1.0), // red
child: Text('Hello World'),
)In this example, we are using the fromRGBO method of the Color class to create a colour with red, green, and blue values of 255, 0, and 0 respectively, and an alpha value of 1.0 (fully opaque).
What is the predefined colour in Flutter
In Flutter, the Colors class contains a list of predefined colours that you can use in your app. These colours are useful for creating a consistent look and feel, and for ensuring that your app meets accessibility standards.
Here is a list of some of the predefined colours in the Colors class:
Colors.red: A bright red colour.Colors.orange: An orange colour.Colors.yellow: A bright yellow colour.Colors.green: A bright green colour.Colors.blue: A bright blue colour.Colors.indigo: A deep blue-purple colour.Colors.purple: A deep purple colour.Colors.pink: A bright pink colour.Colors.black: A deep black colour.Colors.white: A bright white colour.
Here is an example of how you can use one of the predefined colours in the Colors class:
Icon(
Icons.favorite,
color: Colors.red,
size: 24.0,
)Container(
color: Colors.red,
child: Text('Hello World'),
)Here you can see the predefined colour in action.
Icon(
Icons.favorite,
color: Colors.pink,
size: 50.0,
semanticLabel: 'Text to announce in accessibility modes',
),Predefined colour shade in Flutter
In Flutter, shade100 is a predefined colour that is part of the Material Design colour system. It represents the lightest shade of colour in the Material Design colour system and is typically used to represent primary colours in a light theme.
The Material Design colour system consists of a set of predefined colours that can be used in an app’s design. These colours are designed to work well together and are organized into colour “themes” that can be used to give an app a consistent look and feel. The shade100 colour is the lightest shade of colour in a given theme, and is typically used to represent primary colours in a light theme.
For example, if you wanted to use the shade100 version of the colour red in your Flutter app, you could use the following code:
Icon(
Icons.favorite,
color: Colors.red.shade100,
size: 24.0,
)Container(
color: Colors.red.shade100,
height: 100,
width: 100,
)The values used with shade are 50, 100, 200, 300, 400, 500, 600, 700, 800, and 900
- color: Colors.pink,
- color: Colors.pink.shade500,
What is Color.fromARGB in Flutter
In Flutter, the Color.fromARGB method is another way to create a Color object with a custom colour value. It allows you to specify the alpha, red, green, and blue values of the colour as separate arguments.
Here is an example of how to use the Color.fromARGB method to create a custom colour:
Icon(
Icons.favorite,
color: Color.fromARGB(255, 255, 0, 0), // red
size: 24.0,
)Container(
color: Color.fromARGB(255, 255, 0, 0), // red
child: Text('Hello World'),
)In this example, we are using the fromARGB method to create a colour with an alpha value of 255 (fully opaque), and red, green, and blue values of 255, 0, and 0 respectively. This creates a red colour.
RGB values with Alpha. In this case, values are from 0 to 255 for each colour. In the example below I used ARBG which is A-Alpha = 255, R-Red = 234, G-Green = 30, and B-Blue = 99.
- color: Color.fromARGB(255, 234, 30, 99),
What is Color.fromRGBO in Flutter
In Flutter, the Color.fromRGBO method is a way to create a Color object with a custom colour value. It allows you to specify the red, green, blue, and alpha (opacity) values of the colour as separate arguments.
Here is an example of how to use the Color.fromRGBO method to create a custom colour:
Icon(
Icons.favorite,
color: Color.fromRGBO(255, 0, 0, 1.0), // red
size: 24.0,
)Container(
color: Color.fromRGBO(255, 0, 0, 1.0), // red
child: Text('Hello World'),
)In this example, we are using the fromRGBO method to create a colour with red, green, and blue values of 255, 0, and 0 respectively, and an alpha value of 1.0 (fully opaque). This creates a red colour.
The main difference between Color.fromRGBO and Color.fromARGB is the order in which the colour values are specified. Color.fromRGBO expects the red, green, blue, and alpha values as arguments, while Color.fromARGB expects the alpha, red, green, and blue values.
RGBO which is Red, Green, Blue and Opacity. Opacity uses a double value and the range is from 0.0 to 1.0. here 0.0 is fully transparent and 1.0 is fully opaque.
- color: Color.fromRGBO(234, 30, 99, 1.0),
Colour values 0xFFFFFFFF in Flutter
In Flutter, the 0xFFFFFFFF format is a hexadecimal representation of a color value. In this format, the first two digits (FF) represent the alpha channel, which controls the transparency of the color. The next two digits (FF) represent the red channel, the next two digits (FF) represent the green channel, and the final two digits (FF) represent the blue channel.
The values for each channel range from 00 to FF, with 00 representing no intensity and FF representing full intensity. For example, 0xFFFFFFFF represents a fully opaque white color, because all channels are set to full intensity (FF).
To use a color value in this format in Flutter, you can use the Color constructor and pass in the value as an integer. For example, to use the color value 0xFFFFFFFF in your Flutter app, you can use the following code:
Icon(
Icons.favorite,
color: Color(0xFFFF0000), //red
size: 24.0,
)Container(
color: Color(0xFFFFFFFF), // white
height: 100,
width: 100,
)- color: Color(0xFFEA1E63)
How to create a row of Icons in Flutter
To create a row of icons in Flutter, you can use the Row widget and nest Icon widgets inside it.
Example of an empty row:
Row(
children: [
],
)Here is an example with three icons:
Row(
children: <Widget>[
Icon(Icons.favorite),
Icon(Icons.bookmark),
Icon(Icons.share),
],
)This will create a row of three icons, each with the default size and color.
You can customize the appearance of the icons by setting the size and color properties of the Icon widgets. For example:
Row(
children: <Widget>[
Icon(Icons.favorite, size: 36, color: Colors.red),
Icon(Icons.bookmark, size: 36, color: Colors.green),
Icon(Icons.share, size: 36, color: Colors.blue),
],
)This will create a row of three icons, each with a size of 36 pixels and a custom color.
You can also use the mainAxisAlignment and crossAxisAlignment properties of the Row widget to control the alignment of the icons within the row. For example:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.favorite),
Icon(Icons.bookmark),
Icon(Icons.share),
],
)This will create a row of icons with equal spacing between them, and with the icons centered vertically within the row.
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
],
)mainAxisAlignment in Flutter
The mainAxisAlignment property controls the alignment of the children along the main axis of the row, which is horizontal by default. You can use this property to specify how the children should be positioned within the row along the horizontal axis, such as at the start, end, or center of the row.
Available properties:
- MainAxisAlignment.start – aligns all to the left of the row
- MainAxisAlignment.center – aligns all to the centre of the row
- MainAxisAlignment.end – aligns all to the right of the row
- MainAxisAlignment.spaceEvenly – will space all evenly
- MainAxisAlignment.spaceBetween – will space from far left to far right
- MainAxisAlignment.spaceAround – will space all around
mainAxisSize in Flutter
You can also use the mainAxisSize property to control the size of the row along the main axis. For example, you can set mainAxisSize: MainAxisSize.min to make the row as small as possible along the horizontal axis, or set mainAxisSize: MainAxisSize.max to make the row as large as possible along the horizontal axis.
Available parameters:
- MainAxisSize.max – mean the row will use the full width of the screen
- MainAxisSize.min – mean the row will use only as much as the icons need
crossAxisAlignment in Flutter
The crossAxisAlignment property controls the alignment of the children along the cross axis of the row, which is vertical by default. You can use this property to specify how the children should be positioned within the row along the vertical axis, such as at the top, bottom, or center of the row.
Available properties:
- CrossAxisAlignment.start – it will position the elements on top
- CrossAxisAlignment.end – it will position the elements on the bottom
- CrossAxisAlignment.center – it will position the elements in the centre
- CrossAxisAlignment.stretch – all elements are stretched over the horizontal axis. (Row: top-to-bottom, Column: left-to-right)
- CrossAxisAlignment.baseline – it works with the Text class only the (textBaseline parameter must be set to TextBaseline.alphabetic). All elements are aligned based on their character baselines.
When the row is ready, you can add a few icons inside the row into the children section between [ ] brackets, as I did below. In this code, we have two icons.
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Icon(
Icons.favorite,
color: Color(0xFFEA1E63),
size: 50.0,
semanticLabel: 'Text to announce in accessibility modes',
),
Icon(
Icons.favorite_outline_outlined,
color: Color(0xFFEA1E63),
size: 50.0,
semanticLabel: 'Text to announce in accessibility modes',
),
],
)Flutter row of icons Alignment
The example below presents the 4 icons.
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.favorite,
color: Colors.pink,
size: 50.0,
semanticLabel: 'This is a pink icon',
),Icon(
Icons.face_retouching_natural_outlined ,
color: Colors.yellow,
size: 50.0,
semanticLabel: 'This is a yellow icon',
),Icon(
Icons.local_fire_department_sharp ,
color: Colors.redAccent,
size: 50.0,
semanticLabel: 'This is a redAccent icon',
),Icon(
Icons.local_florist ,
color: Colors.blue,
size: 50.0,
semanticLabel: 'This is a blue icon',
),
],
),How to use an icon and text in a row in Flutter
To use an icon and text in a row in Flutter, you can use the Row widget and nest an Icon widget and a Text widget inside it. For example:
Row(
children: <Widget>[
Icon(Icons.favorite),
Text('Click to favorite'),
],
)This will create a row with an icon followed by text.
You can customize the appearance of the icon and text by setting the size, color, fontSize, and fontWeight properties of the Icon and Text widgets. For example:
Row(
children: <Widget>[
Icon(Icons.favorite, size: 36, color: Colors.red),
Text('Click to favorite', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
],
)This will create a row with a 36 pixel red icon followed by bold 24 point text.
You can also use the mainAxisAlignment and crossAxisAlignment properties of the Row widget to control the alignment of the icon and text within the row. For example:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.favorite),
Text('Click to favorite'),
],
)In my example below I wrapped the row with the Container to add extra padding, but in this case.
Container(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.favorite,
color: Colors.pinkAccent,
size: 50.0,
semanticLabel: 'Text to announce in accessibility modes',
),
Text("Favorite",
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w600,
color: Colors.black26
),
)
],
),
),How to use a custom icon in Flutter
At the time of writing, Flutter cannot use custom vector graphics, such as .svg, straight out of the box. But we can use the flutter_svg package. In order to use it, we need to add the flutter_svg package to the dependencies in pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
flutter_svg: 1.0.0Move your custom icon into your assets folder and again add it into pubspec.yaml file.
assets:
- assets/When you want to use your custom icon import the package into your Dart code
import 'package:flutter_svg/flutter_svg.dart';Now initialize your icon
final String assetName = 'assets/icon.svg';Here is my custom icon with text. Again, I wrapped the row widget with a Container and added some padding. While using the Container you can add a background colour or other use other properties of the Container widget.
Container(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 80.0,
width: 80.0,
child: SvgPicture.asset(
assetName,
color: Colors.red,
semanticsLabel: 'custom icon'
),
),
Text("Flutter Assets",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w600,
color: Colors.black26
),
)
],
),
),How to use a png image as an icon in Flutter
Sometimes we would like to use an image instead of an icon in our project. In some widgets usage of icons is mandatory but if the usage of images is possible then we surely can. The images themselves might be bigger than the icons, I mean counting bites or kilobits or in the case of big images megabits, but we still use them.
Here I used the PNG transparent image. We have a little advantage with images over the icons. The images could be more colourful than the icons and we do not need to convert anything to another file format like SVG. But if the image is too small you might not see all of the image details.
In the code below I used the image in the bottom navigation bar and the floating action button.
bottomNavigationBar: BottomNavigationBar(items: [
BottomNavigationBarItem(
icon: Image.asset(
"assets/FlutterAssets_logo.png",
width: 40,
height: 40,
),
label: 'PNG icon 1'
),
BottomNavigationBarItem(
icon: Image.asset(
"assets/FlutterAssets_logo.png",
width: 40,
height: 40,
),
label: 'PNG icon 2'
),
BottomNavigationBarItem(
icon: Image.asset(
"assets/FlutterAssets_logo.png",
width: 40,
height: 40,
),
label: 'PNG icon 3'
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Image.asset(
"assets/FlutterAssets_logo.png",
width: 40,
height: 40,
),
),How to use ImageIcon in Flutter
Right here I should mention that the image needs to be with transparency i.e. png with alpha. The JPG images will not work here. When we use an ImageIcon we will not be able to see all the image colours. In this case, we have to use a color: properties. If we do not use any colour the ImageIcon will be rendered black.
In my example here, I used again the bottom navigation bar and the floating action button, but you can use ImageIcon also in a Row or inside other widgets too.
bottomNavigationBar: BottomNavigationBar(items: [
BottomNavigationBarItem(
icon: ImageIcon(
AssetImage('assets/FlutterAssets_logo.png'),
size: 50,
color: Colors.redAccent,
),
label: 'ImageIcon icon 1'
),
BottomNavigationBarItem(
icon: ImageIcon(
AssetImage('assets/FlutterAssets_logo.png'),
size: 50,
color: Colors.green,
),
label: 'ImageIcon icon 2'
),
BottomNavigationBarItem(
icon: ImageIcon(
AssetImage('assets/FlutterAssets_logo.png'),
size: 50,
color: Colors.blue,
),
label: 'ImageIcon icon 3'
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: ImageIcon(
AssetImage('assets/FlutterAssets_logo.png'),
size: 50,
color: Colors.yellow,
)
),How to add the colour gradient to the icon in Flutter
To further customize your icon we can add a gradient. In order to do that we need to use ShaderMask. I am not an expert, so I won’t deep into this but right now it is what we need. You can notice I have a white colour added to the icon. It is correct. Without this colour, the icon will be rendered BLACK.
ShaderMask(
shaderCallback: (Rect bounds) {
final Rect rect = Rect.fromLTRB(0, 0, 100, 100);
return LinearGradient(
colors: [
Colors.lightBlueAccent,
Colors.indigo,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
).createShader(rect);
},
child: Icon(Icons.account_box_rounded,
size: 100,
color: Colors.white,
),
)You can also create a GradientIcon widget (see below). The full code of the Gradient icon is below. Simply add it to the end of your Dart code.
You can read more about colour gradients here: How do you add a gradient background color in Flutter?
Example of GradientIcon widget in Flutter
class GradientIcon extends StatelessWidget {
GradientIcon(
this.icon,
this.size,
this.gradient,
);
final IconData icon;
final double size;
final Gradient gradient;
@override
Widget build(BuildContext context) {
return ShaderMask(
child: SizedBox(
width: size * 1.2,
height: size * 1.2,
child: Icon(
icon,
size: size,
color: Colors.white,
),
),
shaderCallback: (Rect bounds) {
final Rect rect = Rect.fromLTRB(0, 0, size, size);
return gradient.createShader(rect);
},
);
}
}And then you can use it anywhere in your code
body: Center(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.green,
alignment: Alignment.center,
child: GradientIcon(
Icons.add_alert,
250.0,
LinearGradient(
colors: [
Colors.lightBlueAccent,
Colors.indigo,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
)
),
),How to use CupertinoIcons in Flutter
To use CupertinoIcons you need to import a package.
import 'package:flutter/cupertino.dart';And the use as a normal icon.
Icon(
CupertinoIcons.add_circled,
size: 50,
color: Colors.black,
),fluttericon package
Fluttericon
Flutter icon packs are built from 15 popular free and open-source web fonts. These include all packs available from FlutterIcon (except Material Icons).
Please note this package is not intended for production use, due to its large size. Instead, it can be used as a development aid to help identify/test icons.
For production use, it is highly recommended to use FlutterIcon to customize your icon pack, limiting your icon font to needed icons and building your own from custom SVG.
Included icon sets
The icon set included are:
- Brandico
- Elusive
- Entypo
- Font Awesome (4 and 5)
- Fontelico
- Iconic
- Linearicons Free
- Linecons
- Maki
- Meteocons
- MfgLabs
- ModernPictograms
- Octicons
- RPGAwesome
- Typicons
- WebSymbols
- Zocial
Please review and respect the copyright information contained in the header file for each font set.
Usage
Simply import the desired icon set and use the IconData as normal.
import 'package:fluttericon/typicons_icons.dart';
import 'package:fluttericon/fontelico_icons.dart';
import 'package:fluttericon/linecons_icons.dart';
final myIcons = const <Widget>[
const Icon(Typicons.attention),
const Icon(Fontelico.emo_wink),
const Icon(Linecons.globe),
];
FlutterIcon
To customize icon packs, visit FlutterIcon.
Not a constant expression error in Flutter
While working on this post I got the Not a constant expression error. The fix is really simple. If you have const in the widget with the error or somewhere above, just remove it ( I mean remove const).
