Icon Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
Icon Widget - Flutter widget Guide By Flutter Agency
Icon Widget - Flutter widget Guide By Flutter Agency

What is Icon Widget?

Icon Widget is the primary way of introducing Icons in Flutter. Flutter does its own rendering of these icons instead of the usual Android’s way of importing assets as part of the App project itself. Instead, it takes the difficult route and draws these icons on the canvas. This way it creates better control over the different screen sizes, types that the Icons can be rendered on.

The best way to use the material icons in Flutter is to create the Icons in the house and that’s what Flutter does.

To use Flutter Icons, make sure you set uses-material-design: true in your project’s pubspec.yaml file in the flutter section. This ensures that the MaterialIcons font is included in your application. This font is used to display the icons.

Constructors of a FlutterIcon Widget will look like below :

Icon(
  IconData icon, {
  Key key,
  double size,
  Color color,
  String semanticLabel,
  TextDirection textDirection,
});

How to use icons?

To make use of the Flutter Icon Widget, introduce the Icon Widget in your Flutter application. It’s as simple as calling a method in Flutter.

Icon()

Add specific Icon :

To make use of a particular icon from the available list of icons.user can access the icon with the help of a code snippet as below :

Icon( 
Icons.add,
),

Properties

  • icon: The Icon property holds the space for the icon itself. In Flutter, the material design icons can be used as such, but by calling the Class icons. This class contains all the constants that point to individual icons in the material design library.
  • color: The color property lets you choose the color of this icon. By default, it takes the black color. To make use of this property, use the colors class. accessing colors in Flutter is simple by merely doing Colors. black, Colors.red, etc.

Example :

Icon(
Icons.add, 
color: Colors.red, 
),
  • size: The property takes in a double value and lets you give any size for the icon. As simple as denoting a double value for eg. size: 22.0 will create an Icon of size 22 px.
Icon( 
Icons.add,
size: 24.0,
),
  • textDirection: The text direction is used to denote as to which direction the Icon should be rendered in. make use of the TextDirection class for further available directions.

You can create the application with this list of icons only if any other icon is required, you might have to look at using the Image widget in Flutter to load images/assets rather than Icons.

Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            Icons.add,
            color: Colors.red,
            size: 24.0,
          ),
          Icon(
            Icons.access_alarm,
            color: Colors.green,
            size: 30.0,
          ),
          Icon(
            Icons.arrow_forward,
            color: Colors.blue,
            size: 36.0,
          ),
        ],
      ),
    );

The above code will give us output like below :

Flutter-Icon

Icon widget

Users can get a list of available Icons from Icon class.

Thanks for reading !!!

Do let us know your feedback/suggestion to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply