Icons in Flutter Examples

In Flutter Icons are mainly used to perform some action like we can use the click functionality to call an action. These are graphical way to represent or show any event or action. In this example we will use the Flutter inbuilt-icons with examples:

Using Built-in Icons:

Using build-in icons. There are many built-in-icons that can be used as below.

Generally we user the Icon() widget in flutter to use an icon like below.

Icons.favorite : Icons is a attribute means we want Icon from Icons, and favorite is the name of icon, it can be anything. The next we provide color, size and other designs to the icon.

 
Icon(
      Icons.favorite,
      color: Colors.black,
      size: 26.0,
      semanticLabel: 'Text to announce in accessibility modes',
    ),

Using Icon inside the Row widget

You can wrap the Icon with any widget or can put it inside any widget that take child.


const Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround, 
  children: <Widget>[
    Icon(
      Icons.favorite,
      color: Colors.black,
      size: 26.0,
      semanticLabel: 'Text to announce in accessibility modes',
    ),
    Icon(
      Icons.audiotrack,
      color: Colors.green,
      size: 30.0,
    ),
    Icon(
      Icons.beach_access,
      color: Colors.red,
      size: 32.0,
    ),
  ],
)

Custom Icons:

You can use your icons that are created manually like below. Use the ImageIcon widget for that. Inside the AssetImage(“icon path”) provide the path of image.


import 'package:flutter/material.dart';

class CustomIconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Icon Example'),
      ),
      body: Center(
        child: ImageIcon(
          AssetImage('assets/custom_icon.png'),
          size: 100.0,
          color: Colors.blue,
        ),
      ),
    );
  }
}

Note: Please put you custom icons inside the desired or assets folder and also in the pubspec.yml like below:


flutter:
  assets:
    - assets/custom_icon.png

Icon Buttons:

These are used as button icons. You can perform any action on these Icon button also.


import 'package:flutter/material.dart';

class IconButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Icon Button Example'),
      ),
      body: Center(
        child: IconButton(
          icon: Icon(Icons.favorite),
          onPressed: () {
            // Handle button press
            print('Button Pressed!');
          },
        ),
      ),
    );
  }
}

These are basic examples, and Flutter provides more customization options and flexibility when working with icons. You can also explore third-party packages for additional Icon sets and functionalities, such as the flutter_icons package or integration with popular icon libraries like FontAwesome.

Thank you for reaching out FlutterTPoint you can learn more about the interesting tutorials from here.

Inorder Traversal in Binary Search Tree Full Explanation

Postorder Traversal in Binary Search Tree With Full Explanation

Binary Search Tree Traversal With Full Examples And Explanation

Difference Between Binary Tree and Binary Search Tree With Examples

Searching in Binary Search Tree | FlutterTPoint

Binary Search Tree With Full Examples FlutterTPoint