Flutter is a UI toolkit that used widgets for building fast, beautiful, natively compiled applications for mobile, web, and desktop. The Icon and IconButton are widgets that we can use to display a graphic representation of something, a person or thing that is symbolic.
In this article, we'll look all the aspect of Icon and IconButton widget of Flutter framework. We will learn about these widgets, how to use it in your Flutter application, how to change some of its properties using examples.
Icon widget
The Icons is the primary way to display icons in the Flutter application. The Flutter render these icons instead of the usual Android’s way of importing assets as part of the app project itself. It creates better control over the different screen sizes, types that the icons can be rendered on. Before going to use this class, make sure you have set uses-material-design: true in project’s pubspec.yaml file. This ensures that the MaterialIcons is included in your application. To start using the Icon Widget in Flutter, we will also have to know about different properties:
- icon:- The Icon attribute holds the space for the Icon constants. In Flutter, the material design icons can be used by calling the Class Icons. This class contains all the basically hexadecimal numbers that point to individual icon in the material design library.
Icon(Icons.developer_mode) - size:- The size attribute takes value in a double and you can give size for the icon.
Icon(
Icons.developer_mode,
size: 50,
) - color:- The color property can change the color of icon. By default it takes the Black color. You can use Colors class to display already define colors like Colors.white, Colors.red etc.
Icon(
Icons.developer_mode,
size: 50,
color: Colors.blue,
) - textDirection:- The text direction is used to denote as to which direction the Icon will be rendered in the screen.
Icon(
Icons.developer_mode,
size: 50,
color: Colors.blue,
textDirection: TextDirection.rtl,
)
Example - Icon
Here, you can see complete code snippet of above example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: const Color(0xFF02BB9F),
primaryColorDark: const Color(0xFF167F67),
accentColor: const Color(0xFF167F67),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'DeveloperLibs - Icon',
style: TextStyle(color: Colors.white),
),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
//basic example
Icon(Icons.photo_size_select_actual),
Icon(
Icons.developer_mode,
size: 100,
),
Icon(
Icons.child_care,
color: Colors.blue,
size: 100,
),
Icon(
Icons.smartphone,
color: Colors.blue,
size: 100,
textDirection: TextDirection.ltr,
)
//icon with label below it
])),
);
}
}
You can create the Flutter application with these list of icons only, if you need other icons, you might have to look at ImageWidget in Flutter to load images from the assets.
IconButton
The IconButton is just like a button, but with an icon instead of an normal button. You can customize IconButton touch effects and appearance by using it's properites. You can execute a set of statements when the IconButton is pressed using onPressed property. If you do not specify onPressed property (not even null), the IconButton is displayed as disabled button. You can use IconButton by importing package:flutter/material.dart. To create an IconButton, just call the constructor. There are two required property: icon and onPressed. The icon displays Icon widget and onPressed is a callback function that called when the button is tapped.
To start using the IconButton widget in Flutter, we should know about different properties:
- icon:- The important attribute of the IconButton widget is the icon attribute. This attribute takes the value of an Icon() which can store the icons. The Icon attribute holds the space for the Icon constants. You can define the icon attribute using the code given below
IconButton(
icon: Icon(Icons.sentiment_neutral),
) - size:- The size attribute takes value in a double and you can give size for the icon.
IconButton(
icon: Icon(Icons.sentiment_neutral),
iconSize: 100.0,
) - color:- The Color attribute lets the developer change the color of the IconButton. By default it takes the Black color but you can use Colors class to display already define colors like Colors.white, Colors.red etc.
IconButton(
icon: Icon(Icons.sentiment_neutral),
iconSize: 100.0,
color: Colors.blue,
) - splashColor:- The splash color is a overlay that display when user tap on a point of IconButton. The splash overlay expand to fill the button area if the touch is held for long enough time:
IconButton(
icon: Icon(Icons.sentiment_neutral),
iconSize: 100.0,
color: Colors.blue,
splashColor:Colors.yellow,
) - alignment:- Aligns the Icon inside the boundary that takes in the Alignment class as its value. The value should be a combination of Top, Bottom, Left, Right, and Center:
IconButton(
icon: Icon(Icons.sentiment_neutral),
iconSize: 100.0,
color: Colors.blue,
alignment: Alignment.topLeft
) - tooltip:- You can show a text hover over the IconButton by using the tooltip attribute that come up on the UI when you hover over the IconButton. You can create a tooltip like below:
IconButton(
icon: Icon(Icons.sentiment_neutral),
iconSize: 100.0,
color: Colors.blue,
tooltip: "www.developerlibs.com",
onPressed: (){},
) - Padding:- You can show some amount of space to be given to the Icon with respect to the boundaries of the IconButton:
IconButton(
icon: Icon(Icons.sentiment_neutral),
iconSize: 100.0,
color: Colors.blue,
padding: EdgeInsets.all(40.0)
onPressed: (){},
) - onPressed:- Callback that gets fired whenever the user tap on the IconButton. You can perform set of event inside the onPressed method:
IconButton(
icon: Icon(Icons.sentiment_neutral),
iconSize: 100.0,
color: Colors.blue,
onPressed: (){
print("www.developerlibs.com");
}
) - highlightColor:- The highlightColor display secondary color of the IconButton that represents what the IconButton color is apart from the color attribute when it is pressed:
IconButton(
icon: Icon(Icons.sentiment_neutral),
iconSize: 100.0,
color: Colors.blue,
highlightColor:Colors.teal,
) - disabledColor:- The problem with the color attribute is that, unless the onPressed() callback present, it is in the disabled state only. It becomes important to create a disabled color also. Using the attribute disabledColor which takes in a Color class, you can do the following:
IconButton(
icon: Icon(Icons.sentiment_neutral),
iconSize: 100.0,
color: Colors.blue,
disabledColor:Colors.teal,
onPressed: null
)
