Flutter Font Awesome Plugin Tutorial

Flutter Font Awesome Icons is one of the most popular icons collection packages. In this article, we are going to learn how to use font awesome in flutter app very easily.

Flutter Font Awesome Plugin Installation Tutorial

Step 1: Package Installation

Font awesome flutter package provides icon packs as flutter icons so that we can use them in our flutter apps. It includes all free icons:

• Regular Icon Sets
• Solid Icon Sets
• Brands Icon sets

You can find the font awesome flutter latest version in pub.dev.

After that, In the dependencies section of your pubspec.yaml file, add the following line for activating the flutter font awesome plugin:

font_awesome_flutter: <latest_version>

After adding the above line, click on Packages get in the Android Studio IDE, to download the package into your project.

Once the download is finished, it is ready to use in our project.

How to use it?

In order to use it anywhere in our project, we just need to include the following line of code at the top of the particular file (main.dart in my case).

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Once we include the above line, now flutter will detect our Font Awesome package into the particular file so that we can use it.

IconButton( icon: FaIcon(FontAwesomeIcons.surprise), onPressed: (){}, iconSize: 16.0, ),

For the IconData class, here we use the FaIcon widget provided by our Font Awesome package and access the icons through FontAwesomeIcons class.

Using in Menus

Using Font awesome in Navigation Drawer

In our previous post, we have seen how to implement Navigation Drawer in our flutter apps. So In this section of this article, we are going to learn to use Font Awesome in Navigation Drawer.

In order to achieve this, we will have to write the following code:

drawer: Builder(
        builder: (BuildContext context){
          return Drawer(
            child: ListView(
              children: <Widget>[
                UserAccountsDrawerHeader(
                  accountName: Text('Coding Ninja'),
                  accountEmail: Text('ninja@codingninja.info'),
                  currentAccountPicture: CircleAvatar(
                      backgroundColor: Colors.deepPurple,
                      child: Text("C")),
                ),
                ListTile(
                  leading: FaIcon(FontAwesomeIcons.home),
                  title: Text('Home'),
                  onTap: () {
                    //add routes to navigate

                  },
                ),
                ListTile(
                  leading: FaIcon(FontAwesomeIcons.servicestack),
                  title: Text('Services'),
                  onTap: () {
                    //add routes to navigate

                  },
                ),
                Divider(
                  color: Colors.black87,
                ),
                ListTile(
                  leading: FaIcon(FontAwesomeIcons.cogs),
                  title: Text('Settings'),
                  onTap: () {
                    //add routes to navigate

                  },
                ),
                ListTile(
                  leading: FaIcon(FontAwesomeIcons.exclamation),
                  title: Text('Report Problem'),
                  onTap: () {
                    //add routes to navigate

                  },
                ),
              ],
            ),
          );

Using Font awesome in Bottom Navigation Bar

In our previous post, we have seen how to implement Bottom Navigation Bar in our flutter apps.Similarly, In this section of this article, we are going to learn to use font awesome in Bottom Navigation Bar as shown in the figure shown below:

We can achieve it by writing the following code:

bottomNavigationBar: Builder(
        builder: (BuildContext context){
          return BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                icon: FaIcon(FontAwesomeIcons.home),
                title: new Text('Home'),
              ),
              BottomNavigationBarItem(
                icon: FaIcon(FontAwesomeIcons.envelope),
                title: new Text('Messages'),
              ),
              BottomNavigationBarItem(
                  icon: FaIcon(FontAwesomeIcons.user),
                  title: Text('Profile')
              )
            ],
          );

Using with custom Flutter widgets

Custom flutter widgets are very useful when we want to create our own widgets to achieve certain functionality or re-usability.

We can also use font awesome in our custom flutter widgets in the following way:

class MyCustomWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      // Use the FaIcon Widget + FontAwesomeIcons class for the IconData
      icon: FaIcon(FontAwesomeIcons.gamepad), 
      onPressed: () { print("Pressed"); }
     );
  }
}

Final Words

Congrats! we have come to the end of this article. Fontawesome is a great icon pack with hundreds of icons and is updated daily with new ones. So what are you waiting for? Try it out in your flutter apps.

Happy Coding! 🙂