{"id":10933,"date":"2021-11-12T10:00:00","date_gmt":"2021-11-12T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=10933"},"modified":"2021-11-11T19:30:20","modified_gmt":"2021-11-11T10:30:20","slug":"how-to-use-flutter-font-awesome-icon","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/10933","title":{"rendered":"How to use Flutter font awesome icon ?"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Need an icon not in Material? <\/h3>\n\n\n\n

The material design offers many helpful patterns, including a great set of icons. But they are not the only icons out there. Font awesome’s icon are truly, well, iconic. Luckily, with font_awesome_flutter<\/strong> package, including them in our flutter app.<\/p>\n\n\n\n

It’s too simple so let’s build with simple app including flutter font awesome icon.<\/p>\n\n\n\n

Firstly, we need to add font_awesome_flutter<\/a><\/strong> package in our pubspec.yaml file. <\/p>\n\n\n\n

dependencies:<\/span>\n  font_awesome_flutter: ^9.2.0<\/span><\/strong><\/code><\/pre>\n\n\n\n
For use font_awesome_flutter package, we will need to import this package .<\/p>\n\n\n\n
import 'package:font_awesome_flutter\/font_awesome_flutter.dart';<\/strong><\/code><\/pre>\n\n\n\n
To start the two components of Material Icons– wrapping with Icon and the inner icon_data value. Icons.men<\/strong>u is a default material icon. We will use this icon in our app. <\/p>\n\n\n\n
Icon(Icons.menu)<\/strong><\/code><\/pre>\n\n\n\n
To change icon size and color: <\/p>\n\n\n\n
Icon(FontAwesomeIcons.user,\n    size: 50, \/\/Icon Size\n    color: Colors.white, \n)<\/code><\/pre>\n\n\n\n
Use with FaIcon<\/strong> widget and let’s build a simple app then find out fond awesome icon usage!<\/p>\n\n\n\n
return Scaffold(\n      appBar: AppBar(\n          centerTitle: true,\n          leading: Icon(Icons.menu),\n          title: const Text(\"Font Awesome Icons\")\n      ),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n\n            const Text(\" Font Awesome Flutter package\",textAlign:TextAlign.center,style: TextStyle(fontSize: 30),),\n            const SizedBox(height: 20,),\n            \/\/brand Icons\n            const Text(\"Brand Icons\",textAlign: TextAlign.start,style: TextStyle(fontWeight: FontWeight.bold,fontStyle:FontStyle.italic,fontSize: 20),),\n            Row(\n              mainAxisAlignment: MainAxisAlignment.center,\n              children: const [\n                FaIcon(FontAwesomeIcons.amazon,color: Colors.deepOrange,size: 35,),\n                SizedBox(width: 15,),\n                FaIcon(FontAwesomeIcons.facebook,color: Colors.blue,size: 35,),\n                SizedBox(width: 15,),\n                FaIcon(FontAwesomeIcons.github,color: Colors.black,size: 35,),\n                SizedBox(width: 15,),\n                FaIcon(FontAwesomeIcons.twitter,color: Colors.blueAccent,size: 35,),\n                SizedBox(width: 15,),\n                FaIcon(FontAwesomeIcons.aws,color: Colors.deepOrange,size: 35,),\n                SizedBox(width: 15,),\n                FaIcon(FontAwesomeIcons.pinterest,color: Colors.red,size: 35,),\n                SizedBox(width: 15,),\n                FaIcon(FontAwesomeIcons.wordpress,color: Colors.deepPurple,size: 35,),\n              ],\n            ),\n          ],\n        ),\n      ),\n    )<\/span>;<\/code><\/pre>\n\n\n\n
Hope you enjoy  flutter new things!<\/p>\n\n\n\n
By Ami<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>