Icon Class in Flutter

To display particular symbols in our app, we use the icon class in Flutter. We may utilise the Icon class to easily integrate an icon into our application rather than having to create a picture for it.

In this article, you will learn how to create your Icon class widget in Flutter. So let’s take icon class example of the icon class in Flutter of Mobile application.

Syntax

 Icon(
       key key,
       size,
       color,
       semanticLabel,
       textDirection
 )

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

import 'package:flutter/material.dart';

void main() {

runApp(RunMyApp());

}

Step 3: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

class RunMyApp extends StatelessWidget {

const RunMyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(home);O

}

Step 4: Final code of Icon class .

 import 'package:flutter/material.dart'; 

 void main() {
   runApp(TabBarDemo());
 }

 class TabBarDemo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       home: DefaultTabController(
         length: 5,
         child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.access_time_filled_rounded)),
                Tab(icon: Icon(Icons.accessible)),
                Tab(icon: Icon(Icons.ac_unit_outlined)),
                Tab(icon: Icon(Icons.accessibility_new_rounded)),
                Tab(icon: Icon(Icons.account_balance_wallet_sharp)),
              ],
            ),
            title: Text('CandidRoot Solutions'),
            backgroundColor: Colors.blue,
          ),
          body: TabBarView(
            children: [
              Icon(Icons.access_time_filled_rounded,
                  color: Colors.blue,
                  size: 100),
              Icon(Icons.accessible,
                  color: Colors.blue,
                  size: 100),
              Icon(Icons.camera_alt,
                  color: Colors.blue,
                  semanticLabel: 'Camera',
                  size: 100),
              Icon(Icons.ac_unit_outlined,
                color: Colors.blue,
                size: 100,
                semanticLabel: 'Star',),
              Icon(Icons.account_balance_wallet_sharp,color: Colors.blue,
                size: 100,
                semanticLabel: 'Star',),
             ],
           ),
         ),
       ),
     );
   }
 }

Step 5: Output of above example.

Happy coding!

in Mobile

365Bloggy June 19, 2024

Icon Class in Flutter

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Step 3: Creating a stateless widget

Step 4: Final code of Icon class .

Step 5: Output of above example.

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us