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
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
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
