top of page

Icon Widget in Flutter

Updated: Dec 14, 2022

The Icon widget in Flutter displays a graphical icon bundled with IconData. The Icon widget is not interactive, so we don't have any click callbacks.


In this tutorial, we will implement the Icon widget in Flutter and learn to style it. The following are the different properties of the Icon widget which we can use to modify it.

  • icon(IconData): It takes the icon to display from IconData. This is a required property.

  • size(double): It takes the size of the icon. The default value is 24.0 from default fonts.

  • color(Color): It takes the colour of the Icon. If not provided, it takes from the material theme of the application.

  • semanticLabel(String): A string is provided to label the Icon.

  • textDirection(TextDirection): The text direction to use for rendering the icon. If this is null, the ambient [Directionality] is used instead.

  • shadows(List<Shadow>): Here we provide the list of shadows which is applied on the widget.

Syntax

The Icon widget is implemented as follows:

Icon(
  Icons.access_alarm,
  color: Colors.green,
  size: 100,
),


Basic Example

Here we have demonstrated the Icon widget.

main.dart

class IconWidgetTutorial extends StatelessWidget {
  const IconWidgetTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Icon Widget Tutorial'),
      ),
      body: const Center(
        child: Icon(Icons.access_alarm),
      ),
    );
  }
}

Output

Basic Icon Widget

Styling Example

Here we have applied the color and size parameters to apply some styling.

main.dart

class IconWidgetTutorial extends StatelessWidget {
  const IconWidgetTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Icon Widget Tutorial'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: const <Widget>[
            Icon(
              Icons.access_alarm,
              color: Colors.red,
              size: 50,
            ),
            Icon(
              Icons.access_alarm,
              color: Colors.green,
              size: 100,
            ),
            Icon(
              Icons.access_alarm,
              color: Colors.blue,
              size: 150,
            ),
          ],
        ),
      ),
    );
  }
}

Output

Icon Widget Styling


Shadows

In the following example, we have applied shadows to the Icon widget.

main.dart

class IconWidgetTutorial extends StatelessWidget {
  const IconWidgetTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Icon Widget Tutorial'),
      ),
      body: const Center(
        child: Icon(
          Icons.access_alarm,
          color: Colors.blue,
          size: 150,
          shadows: [
            Shadow(
              color: Colors.black,
              offset: Offset(2, 2),
              blurRadius: 3,
            ),
          ],
        ),
      ),
    );
  }
}

Output

Icon Widget Shadow


Related Posts

See All

The image sharing apps, shopping apps, etc. have image zoom functionality required to see the image in detail. Today, we will learn to implement the same with the help of a widget, InteractiveViewer.

bottom of page