Icon Class in Flutter

Icon class in Flutter is used to show specific icons in our app. Instead of creating an image for our icon, we can simply use the Icon class for inserting an icon in our app. For using this class you must ensure that you have set uses-material-design: true in the pubsec.yml file of your object.

Syntax:
Icon(
      key key,
      size,
      color,
      semanticLabel,
      textDirection
)

Properties:

  • color: It is used to set the color of the icon
  • size: It is used to resize the Icon
  • semanticLable: It comes in play while using the app in accessibility mode (ie, voice-over)
  • textDirection: It is used for rendering Icon

Note: The semanticLabel are not visible in the UI.

A few of them are depicted below:

To view, the complete list of Icons click here.



Let’s see some of those icons in action with simple flutter apps.

Example: 

Here we will design an app that shows various icons on different tabs. Here we will have 5 tabs with 5 icons each and we will alter its properties to view the UI changes. The property changes are as below:

  1. music_note Icon:
    properties:
    color: default, size: 100, semanticLabel: None, textdirection: default
  2. music_video Icon:
    properties:
    color: default, size: 100, semanticLabel: None, textdirection: default
  3. camera_alt Icon:
    properties:
    color: default, size: 100, semanticLabel: 'Camera', textdirection: default
  4. grade Icon:
    properties:
    color: red, size: 300, semanticLabel: 'Star', textdirection: default
  5. email Icon:
    properties:
    color: default, size: default, semanticLabel: None', textdirection: default

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() {
  runApp(TabBarDemo());
}
  
class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 5,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.music_note)),
                Tab(icon: Icon(Icons.music_video)),
                Tab(icon: Icon(Icons.camera_alt)),
                Tab(icon: Icon(Icons.grade)),
                Tab(icon: Icon(Icons.email)),
              ],
            ),
            title: Text('GeeksForGeeks'),
            backgroundColor: Colors.green,
          ),
          body: TabBarView(
            children: [
              Icon(Icons.music_note,
                  size: 100),
              Icon(Icons.music_video,
                color: Colors.blue,
                size: 100),
              Icon(Icons.camera_alt,
                semanticLabel: 'Camera',
                size: 100),
              Icon(Icons.grade,
                color: Colors.red,
                size: 300,
                semanticLabel: 'Star',),
              Icon(Icons.email),
            ],
          ),
        ),
      ),
    );
  }
}

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.