Brand

Flutter Icons

An icon is a graphic image representing an entity with specific meaning for the user. They can be selectable or unselectable. Sometimes it contains a hyperlink to route to different pages.

Flutter provides an Icon Widget that is used to add icons in our applications. We can add icons, either by using inbuilt icons or by adding the custom icons. Flutter provides a list of all icons in the Icons class. In this article, we are going through how to use Flutter icons.

Icon Widget Properties

Property Descriptions
icon We can use it to specify the icon name of the icon to display in the application. Generally, Flutter uses material design icons in the background that are icons for common actions and items.
color Color property is used to specify the color.
size Size property is used for specifying the size of the icon in pixels.

Let us understand Flutter icons using different examples.

Example 1:

In this example, we will use the basic icon widget to learn about this widget.:

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: MyIconPage(),  
    );  
  }  
}  
  
class MyIconPage extends StatefulWidget {  
  @override  
  _MyIconPageState createState() => _MyIconPageState();  
}  
  
class _MyIconPageState extends State {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Icon Tutorial'),  
      ),  
      body: Row(  
        mainAxisAlignment: MainAxisAlignment.spaceAround,  
          children: [  
            Icon(Icons.camera_enhance),  
            Icon(Icons.camera_front),  
            Icon(Icons.camera_rear),  
      ]),  
    );  
  }  
}
Output

flutter-cion-tutorial

Example 2:

In this example, we will customize the icons we will use size and color properties:

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: MyIconPage(),  
    );  
  }  
}  
  
class MyIconPage extends StatefulWidget {  
  @override  
  _MyIconPageState createState() => _MyIconPageState();  
}  
  
class _MyIconPageState extends State {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Icon Tutorial'),  
      ),  
      body: Row(  
        mainAxisAlignment: MainAxisAlignment.spaceAround,  
          children: [  
            Icon(  
              Icons.camera_enhance,  
              size: 70,  
              color:Colors.green  
            ),  
            Icon(  
              Icons.camera_front,  
              size: 70,  
              color:Colors.orange  
            ),  
            Icon(  
              Icons.camera_rear,  
              size: 70,  
              color:Colors.black  
            ),  
      ]),  
    );  
  }  
}
Output

flutter-cion-tutorial-example2

Example 3:

We use Column in the row to add a text widget under the icon widget:

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: MyIconPage(),  
    );  
  }  
}  
  
class MyIconPage extends StatefulWidget {  
  @override  
  _MyIconPageState createState() => _MyIconPageState();  
}  
  
class _MyIconPageState extends State {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Icon Tutorial'),  
      ),  
      body: Column(children: [  
        //icon with label below it  
        Container(  
          padding: EdgeInsets.all(30),  
          child: Row(  
              mainAxisAlignment: MainAxisAlignment.spaceAround,  
              children: [  
                Column(children: [  
                  Icon(  
                    Icons.camera_front,  
                    size: 70  
                  ),  
                  Text('Front Camera'),  
                ]),  
                Column(children: [  
                  Icon(  
                      Icons.camera_enhance,  
                      size: 70  
                  ),  
                  Text('Camera'),  
                ]),  
                Column(children: [  
                  Icon(  
                      Icons.camera_rear,  
                      size: 70  
                  ),  
                  Text('Rear Camera'),  
                ]),  
              ]  
            ),  
          )  
        ],  
      )  
    );  
  }  
}
Output

flutter-cion-tutorial-example3

Previous
Next
Subscribe Now