Icon Widget

What is Icon Widget?

A graphical icon widget drawn with a glyph from a font described in an IconData.

IconData: A class that provides description of an icon fulfilled by a font glyph.

Icons: are identifiers for material design icons. Use with the Icon class to show specific icons, example Icon(Icons.menu). Icons are identified by their name, example: Icons.menu.

Default Constructor

The default constructor creates an icon.

It accepts Icon as the first formal parameter and it provide some other parameters as named optional.

Icon(
     icon// required formal parameter
     size:
     color:
    )

Note: Icon widget assumes that the rendered icon is squared. Non-squared icons may render incorrectly.

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The icon parameter is to display the icon.

The size parameters is to apply size of the icon in logical pixels.

The color parameter is to apply color to use when drawing the icon.

Code snippet

The following code snippet shows how to configure Icon widget.

The icon can be null, in which case the widget will render as an empty space of the specified size.

Icon(
          Icons.add,
          color: Colors.blue,
          size: 24.0,
          semanticLabel: 'Text to announce in accessibility modes',
        ),
        Icon(
          Icons.edit,
          color: Colors.green,
          size: 30.0,
        ),
        Icon(
          Icons.delete,
          color: Colors.red,
          size: 36.0,
        ),

Demo Code

This example shows how to create a Row of Icons in different colors and sizes. The first Icon uses a semanticLabel to announce in accessibility modes like TalkBack and VoiceOver.

import 'package:flutter/material.dart';

class IconDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
        child: Row(
      // Place the free space evenly between the children as well as
      // half of that space before and after the first and last child.
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: const <Widget>[
        Icon(
          Icons.add,
          color: Colors.blue,
          size: 24.0,
          semanticLabel: 'Text to announce in accessibility modes',
        ),
        Icon(
          Icons.edit,
          color: Colors.green,
          size: 30.0,
        ),
        Icon(
          Icons.delete,
          color: Colors.red,
          size: 36.0,
        ),
      ],
    ));
  }
}

class MyApp extends StatelessWidget {
  static const String _title = 'Icon Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: IconDemo(),
      debugShowCheckedModeBanner: false,
    );
  }
}

void main() => runApp(MyApp());

Note: MainAxisAlignment.spaceAround-- Place the free space evenly between the children as well as half of that space before and after the first and last child.

Try above code by commenting mainAxisAlignment line.