Icon Class in Flutter
An Icon Class in Flutter is a picture that stands up for a program or something the user associates with a specific meaning. It has the option to be selectable or not. As an illustration, you cannot choose the company’s logo. On occasion, it will also have a link to another page.
Additionally, it serves as a symbol for the real thing rather than a description. Flutter has an icon widget to help us create icons for our apps. It allows us to build icons using either built-in or custom icons. The Icons class in Flutter contains a list of all icons. This tutorial will teach you how to use the app’s Flutter icons.
What is Icon Class in Flutter?
The icon class in Flutter allows us to display customized icons within our app. Introducing an icon into our program is much easier than making a picture. You need to ensure you have specified uses before using this class.Â
Flutter has an icon widget to help us create icons for our apps. It allows us to build icons using either built-in or custom icons. The Icon Class in Flutter contains a list of all icons. This tutorial will teach you how to use the app’s Flutter icons.
How to Use Built-In Icons
You can use built-in Icons from the Icons class by their names. This is an example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Icons Example'),
),
body: Center(
child: Icon(
Icons.home,
size: 50.0,
color: Colors.blue,
),
),
),
);
}
}Using custom Icons
Most of the time, you must include the Icon Class in Flutter assets in your project and adequately mention them when using custom icons. That can be done in the following way:
Add the icon file: In your project’s assets section, you should put your custom icon file, like custom_icon.png.
Change pubspec.yaml: Add the image to your pubspec.yaml file.
flutter:
  assets:
    - assets/custom_icon.png
Use the Custom Icon: Use the Image widget to show the custom icon:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Icon Example'),
        ),
        body: Center(
          child: Image.asset(
            'assets/custom_icon.png',
            width: 50.0,
            height: 50.0,
          ),
        ),
      ),
    );
  }
}Interactive Icons
A widget that handles movements, like GestureDetector or IconButton, can be wrapped around icons to make them interactive.
Here’s an example of how to use IconButton:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Interactive Icon Example'),
        ),
        body: Center(
          child: IconButton(
            icon: Icon(Icons.navigation),
            color: Colors.green,
            iconSize: 50.0,
            onPressed: () {
              print('Icon pressed');
            },
          ),
        ),
      ),
    );
  }
}Properties Icon Class in Flutter
- Color: It changes the color of the icon.
- Size: It changes the size of the icon.
- SemanticLabel: By adding a semantic label (Semantic widget), you can ensure that people who use accessibility tools like screen readers can figure out what the icon is for.
- textDirection: Setting the textDirection (Directionality widget) helps ensure that Icon Class in Flutter are laid out correctly, especially in languages or situations where text direction is important.Â
Example:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Define a directional context for demonstration
    final TextDirection textDirection = TextDirection.ltr;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon Properties Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // Example 1: Changing color and size of icon
              Icon(
                Icons.favorite,
                size: 50.0,
                color: Colors.red,
              ),
              SizedBox(height: 20.0),
              // Example 2: Providing a semantic label for accessibility
              Semantics(
                label: 'Heart icon',
                child: Icon(
                  Icons.favorite,
                  size: 50.0,
                  color: Colors.blue,
                ),
              ),
              SizedBox(height: 20.0),
              // Example 3: Specifying text direction for icon
              Directionality(
                textDirection: textDirection,
                child: Icon(
                  Icons.favorite,
                  size: 50.0,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}Conclusion
Being familiar with and using the Icon widget and the Icons class in Flutter will help you add essential and valuable icons to your Flutter apps.
