Posted in Dart Flutter

Flutter – How to Use Font Awesome Icons in App

Flutter – How to Use Font Awesome Icons in App Posted on May 16, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Flutter gives inbuilt icon pack to use in your app, but it has very few icon sets, so you have to depend on another icon packs. Font Awesome is one of the best icon pack for flutter or web applications. See the example below and learn how to use Font Awesome Icons in your App.

font awesome icons

First, you need to add font_awesome_flutter Flutter Package in your dependency. Add the following line in your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  font_awesome_flutter: ^8.8.1

Use Default Icon sets.

Icon(Icons.menu)

Use Font Awesome Icon:

Icon(FontAwesomeIcons.cartPlus)

Icon Size and Color:

Icon(FontAwesomeIcons.user,
    size: 50, //Icon Size
    color: Colors.white, //Color Of Icon
)

Find out Icon name from the official website of Font Awesome. You will find 1500+ icons freely. Get the name of an icon and use it in Flutter. Be careful, Icon name is not exactly the same in Flutter, but the starting word is similar. Use Visual Studio Code with Dart and Flutter extensions, it will suggest the name.

icon suggest

See the example below and find out the use of Font Awesome Icons.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class UseFontAwesome extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
           title: Text("Use Icons"),
           leading: Icon(Icons.menu),
           //placing inbuilt icon on leading of appbar
           actions: <Widget>[
               
               IconButton(
                 onPressed: (){},
                 icon: Icon(FontAwesomeIcons.envelope), 
                 //using font awesome icon in action list of appbar
              ),

              IconButton(
                 onPressed: (){},
                 icon: Icon(FontAwesomeIcons.cartPlus), 
                 //cart+ icon from FontAwesome
              ),

              IconButton(
                 onPressed: (){},
                 icon: Icon(FontAwesomeIcons.userAlt), 
                 //cart+ icon from FontAwesome
              ), 
           ],
       ), //set app bar

       body: Container(
          height:300, //height of container
          alignment: Alignment.center, //alignment of content
          padding:EdgeInsets.all(20), //padding of container wrapper
          child:RaisedButton.icon(
                onPressed:(){
                    //action for raised button.
                }, 
                icon: Icon(FontAwesomeIcons.user,
                    size: 50, //Icon Size
                    color: Colors.white, //Color Of Icon
                ), 
                label: Text("Awesome", style: TextStyle(
                    fontSize: 60, //button font size
                    color: Colors.white //button font color
                ),),
                color: Colors.deepOrangeAccent, //color of button
          )
       )
    );
  }

}

In this way, you can use Icons in Flutter and make your app more attractive and interactive.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

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