Font Awesome Icons in Flutter

363

In this tutorial, we will discuss how to add font awesome icons to our flutter applications. Here we will discuss each and every steps by implementing with example.

Constructor of Icons

Icon Icon(
  IconData? icon, {
  Key? key,
  double? size,
  Color? color,
  String? semanticLabel,
  TextDirection? textDirection,
})

Basic Syntax

icon: Icon(Icons.add)

How to implement Font Awesome icons in Flutter?

Step 1: Add dependency to pubspec.yaml

Step 2: Import package to the dart file

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Code Implementation

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

class IconPage extends StatelessWidget {
  const IconPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Fontawesome Icons in flutter"),
        centerTitle: true,
      ),
      body: ListView.builder(
          itemCount: _iconDataList.length,
          itemBuilder: (context, index) {
            return ListTile(
              leading: _iconDataList[index].icon,
              title: Text("${_iconDataList[index].title}"),
              trailing: const Icon(Icons.delete),
            );
          }),
    );
  }
}

class IconData {
  String? title;
  Icon? icon;
  IconData(this.title, this.icon);
}

final List<IconData> _iconDataList = [
  IconData("Facebook", const Icon(Icons.facebook)),
  IconData("Instagram", const Icon(FontAwesomeIcons.instagram)),
  IconData("Viber", const Icon(FontAwesomeIcons.viber)),
  IconData("Whatsapp", const Icon(FontAwesomeIcons.whatsapp)),
  IconData("Google", const Icon(FontAwesomeIcons.google)),
  IconData("Linkedin", const Icon(FontAwesomeIcons.linkedin)),
  IconData("Twitter", const Icon(FontAwesomeIcons.twitter))
];

Output:

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/Icons

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Leave A Reply

Your email address will not be published.