How To Use Icons In Flutter? Font Awesome Icons In Flutter

flutter icons

In this tutorial, we will discuss icons in flutter in detail, how we can customize the flutter icon widget, how can we change icon flutter colorfont awesome icons flutter implementation, how to change icons size, the usage and implementation of font awesome iconsbut first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into flutter icons.

Introduction: Flutter Icons

Icons are used in flutter app to make the apps more attractive. To use them in your flutter app, make sure in the flutter section, uses material design is true in your pubspec yaml.

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

By default, it will be true, but if not then set it to true. Now let’s leave the boring part and start implementing icons in flutter app.

Implementation

Icon(Icons.email)
So by using the icon class, we have implemented our first icon. The required first argument is icon data, we have used email icons using the icons class and getting the email icon from it. Let’s see if we can see an email icon in our flutter app:
flutter mail icon

Icon Color

color: Colors.blue
In order to change the color of flutter icon, use the color constructor of icon class. In our case, we have specified it to blue. Let’s see how it looks now:
flutter icon color

Icon Size

size: 50
Flutter icon size change takes place by using the size constructor of icon class. We have set it to 50, now let’s see how it looks:
flutter icon size change

Font Awesome Icons

Let’s talk about using font awesome icons to implement icons. We can see a lot of beautiful icons using this package. Let’s see how to use it.

Import Font Awesome Flutter

font_awesome_flutter: ^9.2.0

Import font awesome flutter icons by importing this package. Use it in the dependencies section of your app’s pubs pec yaml as shown in the below image:

font awesome flutter package

 

Implementing Font Awesome Icons

Icon(
        FontAwesomeIcons.airFreshener,
        color: Colors.blue,
        size: 50,
      )
As we can see in the above code, the implementation of font awesome icons is simple. Just use font awesome icons class in the icon data argument of icon class and you can access and use the font awesome icons in flutter app. We have used air freshener, let’s see how it looks:
font awesome icons
We can see that we can change the size, color etc of this icon as well using the same color and size constructor of icon class.

Icon Theme

IconTheme(
        data: IconThemeData(opacity: .2),
        child: Icon(
          FontAwesomeIcons.airFreshener,
          color: Colors.blue,
          size: 50,
        ),
      )
Using the icon theme class, we can specify the icon’s color, size and opacity. For demonstration, we have given it an opacity of 0.2. Let’s see how the icon appears now:
flutter icons opacity
If we don’t specify the color in the icon class but we have specified a color in icon theme, let’s say we have specified green then the default color of icon will be green, that goes for size and opacity as well. Let’s look at the mentioned icons complete source code.

Source Code

flutter icons font awesome icons

import 'package:flutter/material.dart';

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Beautiful Icons',

      debugShowCheckedModeBanner: false,

      home: Homepage(),

    );

  }

}

class Homepage extends StatelessWidget {

  const Homepage({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return SafeArea(

      child: Scaffold(

          body: Center(

              child: Column(

        mainAxisAlignment: MainAxisAlignment.center,

        children: [

          Icon(

            Icons.person,

            color: Colors.red,

            size: 50,

          ),

          SizedBox(

            height: 30,

          ),

          IconTheme(

            data: IconThemeData(color: Colors.pink, size: 50),

            child: Icon(

              Icons.access_alarms,

            ),

          ),

          SizedBox(

            height: 30,

          ),

          IconTheme(

            data: IconThemeData(

              color: Colors.green,

            ),

            child: Icon(

              FontAwesomeIcons.airFreshener,

              color: Colors.blue,

              size: 50,

            ),

          ),

          SizedBox(

            height: 30,

          ),

          IconTheme(

            data: IconThemeData(color: Colors.green, size: 40),

            child: Icon(

              FontAwesomeIcons.addressBook,

            ),

          ),

          SizedBox(

            height: 30,

          ),

          Icon(FontAwesomeIcons.personBooth, color: Colors.purple, size: 40),

          SizedBox(

            height: 30,

          ),

          Icon(FontAwesomeIcons.affiliatetheme,

              color: Colors.purple.shade400, size: 40),

          SizedBox(

            height: 30,

          ),

          Icon(FontAwesomeIcons.accessibleIcon, color: Colors.blue, size: 40),

          SizedBox(

            height: 30,

          ),

          Icon(FontAwesomeIcons.android, color: Colors.green, size: 40),

          SizedBox(

            height: 30,

          ),

          Icon(FontAwesomeIcons.phone, color: Colors.grey, size: 40),

        ],

      ))),

    );

  }

}

Note:

That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks for reading.

Leave a Comment

Your email address will not be published. Required fields are marked *