The Font Awesome Icon pack available as Flutter Icons

Overview

font_awesome_flutter

Flutter Community: font_awesome_flutter

Pub

The Font Awesome Icon pack available as set of Flutter Icons.

Based on Font Awesome 5.15.4. Includes all free icons:

  • Regular
  • Solid
  • Brands

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  font_awesome_flutter: <latest_version>

Usage

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

Icon names

Icon names equal those on the official website, but are written in lower camel case. If more than one icon style is available for an icon, the style name is used as prefix, except for "regular". Due to restrictions in dart, icons starting with numbers have those numbers written out.

Examples:

Icon name Code Style
angle-double-up FontAwesomeIcons.angleDoubleUp solid (this icon does not have other free styles)
arrow-alt-circle-up FontAwesomeIcons.arrowAltCircleUp regular
arrow-alt-circle-up FontAwesomeIcons.solidArrowAltCircleUp solid
1 FontAwesomeIcons.solidOne solid

Example App

View the Flutter app in the example directory to see all the available FontAwesomeIcons.

Customizing font awesome flutter

We supply a configurator tool to assist you with common customizations to this package. All options are interoperable. By default, if run without arguments and no icons.json in lib/fonts exists, it updates all icons to the newest free version of font awesome.

Setup

To use your custom version, you must first clone this repository to a location of your choice and run flutter pub get inside. This installs all dependencies.

The configurator is located in the util folder and can be started by running configurator.bat on Windows, or configurator.sh on linux. All following examples use the .sh version, but are exactly the same for .bat. An overview of available options can be viewed with configurator.sh --help.

To use your customized version in an app, go to the app's pubspec.yaml and add a dependency for font_awesome_flutter: '>= 4.7.0'. Then override the dependency's location:

dependencies:
  font_awesome_flutter: '>= 4.7.0'
  ...
  
dependency_overrides:
  font_awesome_flutter:
    path: /path/to/your/font_awesome_flutter
  ...

Enable pro icons

By importing pro icons you acknowledge that it is your obligation to keep these files private. This includes not uploading your package to a public github repository or other public file sharing services.

  • Go to the location of your custom font_awesome_flutter version (see setup)
  • Download the web version of font awesome pro and open it
  • Move all .ttf files from the webfonts directory and icons.json from metadata to /path/to/your/font_awesome_flutter/lib/fonts. Replace existing files.
  • Run the configurator. It should say "Custom icons.json found"

It may be required to run flutter clean in apps who use this version for changes to appear.

Excluding styles

One or more styles can be excluded from all generation processes by passing them with the --exclude option:

$ configurator.sh --exclude solid
$ configurator.sh --exclude solid,brands

See the optimizations and dynamic icon retrieval by name sections for more information as to why it makes sense for your app.

Retrieve icons dynamically by their name or css class

Probably the most requested feature after support for pro icons is the ability to retrieve an icon by their name. This was previously not possible, because a mapping from name to icon would break all discussed optimizations. Please bear in mind that this is still the case. As all icons could theoretically be requested, none can be removed by flutter. It is strongly advised to only use this option in conjunction with a limited set of styles and with as few of them as possible. You may need to build your app with the --no-tree-shake-icons flag for it to succeed.

Using the new configurator tool, this is now an optional feature. Run the tool with the --dynamic flag to generate...

$ configurator.sh --dynamic

...and the following import to use the map. For normal icons, use faIconMapping with a key of this format: 'style icon-name'. For duotone icon, use faIconMappingDuotone - the icon name is sufficient as key.

import 'package:font_awesome_flutter/name_icon_mapping.dart';

...
    FaIcon(
      icon: faIconMapping['solid abacus'],
    );
...

To exclude unused styles combine the configurator options:

$ configurator.sh --dynamic --exclude solid

A common use case also includes fetching css classes from a server. The utility function getIconFromCss() takes a string of classes and returns the icon which would be shown by a browser:

getIconFromCss('far custom-class fa-abacus'); // returns the abacus icon in regular style. custom-class is ignored

Duotone icons

Duotone icons require special treatment. Instead of FaIcon a special class FaDuotoneIcon needs to be used. It allows to set the primary and secondary colors for the icon. If primary and / or secondary color are not defined, they will default to the standard IconTheme color. Please be aware that only duotone style icons can be passed to this class. FaDuotoneIcon is only available if at least one duotone icon was added using the configurator.

FaDuotoneIcon(
  FontAwesomeIcons.duotoneAbacus,
  primaryColor: Colors.black.withOpacity(.4),
  secondaryColor: Colors.black,
);

FAQ

Why aren't the icons aligned properly or why are the icons being cut off?

Please use the FaIcon widget provided by the library instead of the Icon widget provided by Flutter. The Icon widget assumes all icons are square, but many Font Awesome Icons are not.

What about file size and ram usage

This package has been written in a way so that it only uses the minimum amount of resources required.

All links (eg. FontAwesomeIcons.abacus) to unused icons will be removed automatically, which means only required icon definitions are loaded into ram.

Flutter 1.22 added icon tree shaking. This means unused icon "images" will be removed as well. However, this only applies to styles of which at least one icon has been used. Assuming only icons of style "regular" are being used, "regular" will be minified to only include the used icons and "solid" and "brands" will stay in their raw, complete form. This issue is being tracked over in the flutter repository.

However, using the configurator, you can easily exclude styles from the package. For more information, see customizing font awesome flutter

Why aren't the icons showing up on Mobile devices?

If you're not seeing any icons at all, sometimes it means that Flutter has a cached version of the app on device and hasn't pushed the new fonts. I've run into that as well a few times...

Please try:

  1. Stopping the app
  2. Running flutter clean in your app directory
  3. Deleting the app from your simulator / emulator / device
  4. Rebuild & Deploy the app.

Why aren't the icons showing up on Web?

Most likely, the fonts were not correctly added to the FontManifest.json. Note: older versions of Flutter did not properly package non-Material fonts in the FontManifest.json during the build step, but that issue has been resolved and this shouldn't be much of a problem these days.

Please ensure you are using Flutter 1.14.6 beta or newer!

Comments
  • The method 'FaDuotoneIcon' isn't defined for the type '_MyHomePageState'

    The method 'FaDuotoneIcon' isn't defined for the type '_MyHomePageState'

    Hello, I have followed the "How can I use pro icons?" in the documentation, reproduced every step as it says in the instructions, in a new project just to demonstrate.

    It seems like I am not able to use the FaDuotoneIcon class as well as the Pro Icons.

    I still get the error saying "The method 'FaDuotoneIcon' isn't defined for the type '_MyHomePageState'" and "The getter 'abacus' isn't defined for the type 'FontAwesomeIcons'."

    Here is how my directory looks like:

    /dependency_overrides/font_awesome_flutter/ file_structure

    the icons.json file is in the dependency_overrides/font_awesome_flutter/. (Maybe I am doing this wrong? I'm not sure where to put this)

    Project pubspec.yaml: project pubspec

    Font Awesome pubspec.yaml: font awesome pubspec

    The lines of code causing errors: error

    Both errors in text are defined at the start

    Please let me know the issue here, thank you!

    Awaiting reply Pro icons 
    opened by Coffiie 19
  • Get icon by original name

    Get icon by original name

    Nice work :) Would be nice if there were a function to get Icons by there original name like: FontAwesomeIcons.getByOriginalName('paint-brush');

    if name dose not exists return the "?" :)

    opened by Mythar 19
  • Showing Blank Boxes

    Showing Blank Boxes

    Description

    When Running on Android it is showing blank boxes for the Font Awesome Icons, and Showing the correct ones for Flutter Icons. This was working when I installed it last week. I have also run flutter clean but still no luck.

    screenshot_20180507-101256

    Flutter Doctor

    Rodys-MBP:daily_nasa rodydavis$ flutter doctor
    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel beta, v0.3.1, on Mac OS X 10.13.3 17D102, locale en-US)
    [✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    [!] iOS toolchain - develop for iOS devices (Xcode 9.3)
        ✗ Verify that all connected devices have been paired with this computer in Xcode.
          If all devices have been paired, libimobiledevice and ideviceinstaller may require updating.
          To update, run:
            brew uninstall --ignore-dependencies libimobiledevice
            brew install --HEAD libimobiledevice
            brew install ideviceinstaller
    [✓] Android Studio (version 3.1)
    [✓] VS Code (version 1.23.0)
    [✓] Connected devices (2 available)
    
    ! Doctor found issues in 1 category.
    

    Dependency

    font_awesome_flutter: 6.0.0

    Use in Project

    @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            backgroundColor: Colors.white,
            title: new Text("Info"),
          ),
          body: new SingleChildScrollView(
            child: new ListBody(
              children: <Widget>[
                new Container(
                  height: 10.0,
                ),
                new ListTile(
                  leading: new Icon(FontAwesomeIcons.github),
                  title: const Text('Github'),
                  subtitle: new Text('@AppleEducate'),
                  onTap: () {
                    globals.Utility
                        .launchURL('https://www.github.com/appleeducate');
                  },
                ),
                new Divider(
                  height: 20.0,
                ),
                new ListTile(
                  leading: new Icon(FontAwesomeIcons.twitter),
                  title: const Text('Twitter'),
                  subtitle: new Text('@RodyDavis'),
                  onTap: () {
                    globals.Utility.launchURL('https://www.twitter.com/rodydavis');
                  },
                ),
                new Divider(
                  height: 20.0,
                ),
                new ListTile(
                  leading: new Icon(FontAwesomeIcons.facebook),
                  title: const Text('Facebook'),
                  subtitle: new Text('@RodyDavis'),
                  onTap: () {
                    globals.Utility.launchURL('https://www.facebook.com/rodydavis');
                  },
                ),
                new Divider(
                  height: 20.0,
                ),
                new ListTile(
                  leading: new Icon(Icons.apps),
                  title: const Text('Apps'),
                  subtitle: new Text('by Rody Davis'),
                  onTap: () {
                    globals.Utility.launchURL('https://www.rodydavis.com/apps');
                  },
                ),
                new Divider(
                  height: 20.0,
                ),
                new ListTile(
                  leading: new Icon(Icons.contact_mail),
                  title: const Text('Contact'),
                  subtitle: new Text('Submit Issues and Questions'),
                  onTap: () {
                    globals.Utility.launchURL('https://www.rodydavis.com/about');
                  },
                ),
                new Divider(
                  height: 20.0,
                ),
                new ListTile(
                  leading: new Icon(FontAwesomeIcons.spaceShuttle),
                  title: const Text('NASA'),
                  subtitle: new Text('All Images provided by API'),
                  onTap: () {
                    globals.Utility.launchURL('https://api.nasa.gov/');
                  },
                ),
                new Divider(
                  height: 20.0,
                ),
                new ListTile(
                  leading: new Icon(Icons.info),
                  title: const Text('Version'),
                  subtitle: new Text('$_projectVersion ($_projectCode)'),
                  trailing: new Text('$_platformVersion'),
                ),
              ],
            ),
          ),
        );
      }
    
    opened by rodydavis 19
  • RangeError was thrown building FaIcon-[<'secondaryGlyph'>

    RangeError was thrown building FaIcon-[<'secondaryGlyph'>

    Hi all,

    I seem to be getting this on upgrading to Flutter 2.2.1 and I've not changed anything I can see. I've added this to the file in question:

    // @dart=2.11

    as I'm not fully null safety migrated yet and this may well be nothing to do with FA, but it's all I've got to go on. Any ideas?

    ======== Exception caught by widgets library =======================================================
    The following RangeError was thrown building FaIcon-[<'secondaryGlyph'>](IconData(U+11F5EA), color: Color(0x662092ed), dirty, dependencies: [Directionality, IconTheme]):
    Invalid value: Not in inclusive range 0..1114111: 1177066
    
    The relevant error-causing widget was: 
      FaDuotoneIcon file:///home/ghenry/AndroidStudioProjects/surevoip_talk/lib/src/view/home.dart:307:43
    When the exception was thrown, this was the stack: 
    #0      new String.fromCharCode (dart:core-patch/string_patch.dart:45:5)
    #1      FaIcon.build (package:font_awesome_flutter/src/fa_icon.dart:106:22)
    #2      StatelessElement.build (package:flutter/src/widgets/framework.dart:4648:28)
    #3      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4574:15)
    #4      Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5)
    

    Thanks.

    opened by ghenry 18
  • Certain icons are not displayed

    Certain icons are not displayed

    Hello! I followed the process of adding PRO icons carefully. All the fonts are in the appropriate lib/fonts folder.

    What happens is that certain types of the icons are missing. Sometimes it's only the solid version that is not displayed, other times it's the solid and regular version. Interestingly, the light version seems to be displayed at all times.

    screenshot_17

    I've checked the font TTF files and, indeed, all of the glyphs are present. The code generated by the update.bat script seems to be correct. For example:

      static const IconData airConditioner = const IconDataRegular(0xf8f4);
      static const IconData solidAirConditioner = const IconDataSolid(0xf8f4);
      static const IconData lightAirConditioner = const IconDataLight(0xf8f4);
      static const IconData duotoneAirConditioner = const IconDataDuotone(0xf8f4);
    
    bug help wanted Generator 
    opened by ResoDev 15
  • Xcode 12, iOS 14, dev channel and tree shaking

    Xcode 12, iOS 14, dev channel and tree shaking

    Hi all,

    I'm building for iOS 14 and on flutter dev channel hitting this:

          ^
        18 warnings generated.
        18 warnings generated.
        This application cannot tree shake icons fonts. It has non-constant instances of IconData at the following locations:
          - file:///Users/ghenry/.pub-cache/git/font_awesome_flutter_with_pro_icons-21c4b76f5548070f452b2abd7be244bb94b14bad/lib/src/fa_duotone_icon.dart:58:13
          - file:///Users/ghenry/.pub-cache/git/font_awesome_flutter_with_pro_icons-21c4b76f5548070f452b2abd7be244bb94b14bad/lib/src/fa_duotone_icon.dart:63:13
    

    I'm adding this now to resolve, but wondered if anyone has seen this? I may switch back to the beta channel to check too:

    --no-tree-shake-icons

    On latest FA from pub.dev too with pro icons.

    Flutter doctor:

    [✓] Flutter (Channel dev, 1.23.0-4.0.pre, on Mac OS X 10.15.6 19G2021 x86_64, locale en-GB)
    
    [✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    [✓] Xcode - develop for iOS and macOS (Xcode 12.0)
    [✓] Android Studio (version 3.6)
    

    Thanks.

    opened by ghenry 13
  • Pro icons not rendering

    Pro icons not rendering

    Description

    Font Awesome 6.1.1 Pro icons are rendered with a crossed-out placeholder whereas free icons are displayed correctly.

    In the widget inspector I can see the all icons (e.g.: FontAwesomeIcons.brainArrowCurvedRight-> IconData(U+0F677)) but the display is still not right.

    To Reproduce

    FontAwesomeFlutter version: 10.1.0 FontAwesome version: 6.1.1

    I do have the pro icons. I've placed all .ttf files and the icons.json under font_awesome_flutter/lib/fonts, and ran the configurator.

    The output of configurator.sh:

    Using font_awesome_flutter version 10.1.0 Downloading https://api.github.com/repos/fluttercommunity/font_awesome_flutter/releases

    Custom icons.json found, generating files Duotone icons are no longer supported. Automatically disabled them.

    Generating icon definitions Formatted lib/font_awesome_flutter.dart Formatted 1 file (1 changed) in 0.59 seconds.

    Generating example code Formatted example/lib/icons.dart Formatted 1 file (1 changed) in 0.37 seconds.

    Found and enabled the following icon styles: brands, regular, solid, light, thin

    Running "dart pub get" Resolving dependencies... Because font_awesome_flutter depends on flutter_test from sdk which doesn't exist (the Flutter SDK is not available), version solving failed.

    Flutter users should run flutter pub get instead of dart pub get.

    Done

    I've tried the following steps:

    1. Stopping the app
    2. Running flutter clean in app directory
    3. Deleting the app from simulator / emulator / device
    4. Rebuild & Deploy the app.

    Expected behavior I'd like the pro icons to display like the free ones.

    Screenshots

    The icon on top is a pro icon, the bottom one is free. faicon

    Desktop:

    • OS: macOS Monterey 12.4

    Smartphone:

    • Device: Pixel 5 emulator, API 31
    • OS: Android
    opened by ZsoltFischer 12
  • Will it automatically remove unused icons in the released app?

    Will it automatically remove unused icons in the released app?

    Hi thanks for the library! I wonder whether it will automatically remove those unused icons? For instance, say I only use the "heart" icon. Then IMHO the final app should only contain this icon, instead of thousands of icons.

    Thanks!

    P.S. I have read the README but cannot find related info :/

    opened by fzyzcjy 12
  • [web] Icons aren't loading in release

    [web] Icons aren't loading in release

    Hello font_awesome_flutter team,

    hope you all doing well.

    icons aren't loading in the release version of the web.

    Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.1, on macOS 11.4 20F71 darwin-x64, locale en-US) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 4.2) [✓] IntelliJ IDEA Ultimate Edition (version 2021.1.1) [✓] VS Code (version 1.56.2) [✓] Connected device (1 available)

    version font_awesome_flutter: ^9.0.0

    image

    This my FontManifest.json which couldn't find any docs to help on it.

    [
       {
          "family": "IconMoon",
          "fonts": [
            {
              "asset": "assets/icons/icomoon.ttf"
            }
          ]
      },
      {
        "family": "MaterialIcons",
        "fonts": [
          {
            "asset": "fonts/MaterialIcons-Regular.otf"
          }
        ]
      },
      {
        "family": "FontAwesomeRegular",
        "fonts": [
          {
            "asset": "packages/font_awesome_flutter/lib/fonts/fa-regular-400.ttf"
          }
        ]
      },
      {
        "family": "FontAwesomeSolid",
        "fonts": [
          {
            "asset": "packages/font_awesome_flutter/lib/fonts/fa-solid-900.ttf"
          }
        ]
      },
      {
        "family": "FontAwesomeBrands",
        "fonts": [
          {
            "asset": "packages/font_awesome_flutter/lib/fonts/fa-brands-400.ttf"
          }
        ]
      }
    ]
    
    opened by mhabashy 10
  • Size not consistent with material design icons

    Size not consistent with material design icons

    Fontawesome icons are little bigger than Icons in material/package Can you make them same size so its consistent across the app There is a little padding around icons in material package

    enhancement wontfix 
    opened by jajpa 10
  • Executing

    Executing "configurator.bat --dynamic" creates name_icon_mapping.dart with error

    Could not format because the source could not be parsed:

    line 7194, column 36 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 7194 │ 'overline': const FontAwesomeIcons.duotoneOverline, │ ^^^^^^^^^^^^^^^ ╵ line 7120, column 44 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 7120 │ 'meh-rolling-eyes': const FontAwesomeIcons.duotoneMehRollingEyes, │ ^^^^^^^^^^^^^^^^^^^^^ ╵ line 7567, column 41 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 7567 │ 'star-shooting': const FontAwesomeIcons.duotoneStarShooting, │ ^^^^^^^^^^^^^^^^^^^ ╵ line 6826, column 43 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 6826 │ 'grin-beam-sweat': const FontAwesomeIcons.duotoneGrinBeamSweat, │ ^^^^^^^^^^^^^^^^^^^^ ╵ line 6678, column 34 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 6678 │ 'faucet': const FontAwesomeIcons.duotoneFaucet, │ ^^^^^^^^^^^^^ ╵ line 6390, column 41 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 6390 │ 'chart-pie-alt': const FontAwesomeIcons.duotoneChartPieAlt, │ ^^^^^^^^^^^^^^^^^^ ╵ line 7344, column 36 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 7344 │ 'repeat-1': const FontAwesomeIcons.duotoneRepeat1, │ ^^^^^^^^^^^^^^ ╵ line 6527, column 41 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 6527 │ 'compress-wide': const FontAwesomeIcons.duotoneCompressWide, │ ^^^^^^^^^^^^^^^^^^^ ╵ line 6752, column 33 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 6752 │ 'flute': const FontAwesomeIcons.duotoneFlute, │ ^^^^^^^^^^^^ ╵ line 7497, column 40 of lib\name_icon_mapping.dart: Expected to find '('. ╷ 7497 │ 'snowboarding': const FontAwesomeIcons.duotoneSnowboarding, │ ^^^^^^^^^^^^^^^^^^^ ╵ (1842 more errors...)

    opened by tarafat 9
  • Flutter Build Option `--tree-shake-icons` fails due to font_awesome_flutter-10.2.1

    Flutter Build Option `--tree-shake-icons` fails due to font_awesome_flutter-10.2.1

    If you build a flutter application with the option --tree-shake-icons for the web, you get some errors coming from icon_data.dart. Tree shaking only works for icon data that is const, and a few IconData subclasses introduced by font_awesome_flutter are not considered const.

    Steps to reproduce the behavior:

    • build a flutter 3.3.9 application using font_awesome_flutter (version 10.2.1) with the option --tree-shake-icons enabled
    • observe the output

    Expected behavior To be fair, it's not necessarily a 'bug', but being able to tree shake icons is very valuable for minimizing bundle size, and many people will likely be serving more icons that they need to while this behavior exists.

    Screenshots image

    Desktop (please complete the following information):

    • OS: Tested on Windows 10 and MacOSX Catalina - appears on both
    • font_awesome_flutter version 10.2.1

    Additional Information I understand that having a dynamic type may be built into the assumptions of this codebase, and difficult to remove. If that's the case, feel free to close this.

    opened by churchianity 11
  • Missing sharp solid style in pro version?

    Missing sharp solid style in pro version?

    fontawesome-pro 6.2's major change is the sharp solid style icons.

    Then I tried to follow the readme to create my own pro version, and I found that the sharp solid style are completely ignored.

    here is the styles: https://fontawesome.com/search?o=r&s=solid&f=sharp

    as you can see, the sharp solid is just a solid variation, but in generated pubspec.yaml:

    flutter:
      fonts:
        - family: FontAwesomeBrands
          fonts:
            - asset: lib/fonts/fa-brands-400.ttf
              weight: 400
        - family: FontAwesomeRegular
          fonts:
            - asset: lib/fonts/fa-regular-400.ttf
              weight: 400
        - family: FontAwesomeSolid
          fonts:
            - asset: lib/fonts/fa-solid-900.ttf
              weight: 900
        - family: FontAwesomeLight
          fonts:
            - asset: lib/fonts/fa-light-300.ttf
              weight: 300
        - family: FontAwesomeThin
          fonts:
            - asset: lib/fonts/fa-thin-100.ttf
              weight: 100
    

    there is no fa-sharp-solid-900.ttf, I think the simplest way and maybe annoying way is duplicate and add sharp prefix to all solid icons. like FontAwesomeIcons.solidZero and FontAwesomeIcons.sharpSolidZero? indeed a little strange 😅

    opened by steve3d 8
  • Can't be assigned to the parameter type 'Icon'

    Can't be assigned to the parameter type 'Icon'

    I'm trying to use font_awesome_flutter: ^9.2.0 along with icon: const FaIcon(FontAwesomeIcons.gamepad) but I get the error The argument type 'FaIcon' can't be assigned to the parameter type 'Icon'. I'm using it with HawkFabMenuItem which has an attribute of {required Icon icon} so it seems to be like most icon attributes, but it gives me an error. Thoughts on why?

    opened by dhust 0
  • Default finders from `flutter_test` don't work with `FaIcon`

    Default finders from `flutter_test` don't work with `FaIcon`

    The problem

    Let's say that I have the following Widget:

    IconButton(
        iconSize: 20,
        icon: FaIcon(FontAwesomeIcons.eye),
        onPressed: () {/* change PasswordTextField visibility */},
      );
    

    If I want to test that this Widget is visible, I'd normally use

    // password_text_field_test.dart
    
     testWidgets(
          'tapping on password visibility button toggles it',
          (tester) async {
            final eyeFinder = find.widgetWithIcon(IconButton, FontAwesomeIcons.eye);
            expect(eyeFinder, findsOneWidget);
    });
    

    But the above will fail:

    tapping on password visibility button toggles it
    ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
    The following TestFailure was thrown running a test:
    Expected: exactly one matching node in the widget tree
      Actual: _AncestorFinder:<zero widgets with type "IconButton" which is an ancestor of icon
    "IconData(U+0F06E)">
       Which: means none were found but one was expected
    

    The reason is that FaIcon is not an Icon (i.e FaIcon extends StatelessWidget), so find.widgetWithIcon can't find it.

    The solution 1/2

    To make find.widgetWithIcon work with FaIcon, we have to create a custom implementation of Flutter's WidgetIconFinder:

    class WidgetFaIconFinder extends MatchFinder {
      WidgetFaIconFinder(this.icon, {bool skipOffstage = true})
          : super(skipOffstage: skipOffstage);
    
      final IconData icon;
    
      @override
      String get description => 'Font Awesome icon "$icon"';
    
      @override
      bool matches(Element candidate) {
        final widget = candidate.widget;
        return widget is FaIcon && widget.icon == icon;
      }
    }
    

    Then, to make it shorter for use in tests, we can create our own CustomFinders class, basing on Flutter's CommonFinders:

    // finders.dart
    
    const customFind = CustomFinders._();
    
    class CustomFinders {
      const CustomFinders._();
    
      /// Like [CommonFinders.byIcon], but for FontAwesomeIcons.
      Finder byFaIcon(IconData icon, {bool skipOffstage = true}) =>
          WidgetFaIconFinder(icon, skipOffstage: skipOffstage);
    
      /// Like [CommonFinders.widgetWithIcon], but for FontAwesomeIcons.
      Finder widgetWithFaIcon(
        Type widgetType,
        IconData icon, {
        bool skipOffstage = true,
      }) {
        return find.ancestor(
          of: customFind.byFaIcon(icon),
          matching: find.byType(widgetType),
        );
      }
    }
    

    The solution 2/2

    Then, we can use our custom finders just like we'd use the default ones

    // password_text_field_test.dart
    
     testWidgets(
          'tapping on password visibility button toggles it',
          (tester) async {
            final eyeFinder = customFind.widgetWithFaIcon(IconButton, FontAwesomeIcons.eye);
            expect(eyeFinder, findsOneWidget);
    });
    

    Further steps

    I see 2 ways:

    • add custom finders to this package, so users don't have to write their own
    • include information about how to test FaIcon (maybe link to this issue?)
    opened by bartekpacia 0
  • Icon not centered in FaIcon when used as prefix icon

    Icon not centered in FaIcon when used as prefix icon

    I have a TextFormField and am using the FaIcon widget as prefix icon:

    TextFormField(
         decoration: InputDecoration(
             border: InputBorder.none,
             contentPadding: EdgeInsets.only(top: 14.0),
             prefixIcon: FaIcon(
                 FontAwesomeIcons.penNib,
                 color: themeOrangeColor,
             ),
        ),
    )
    

    This results in the FontAwesomeIcon to be aligned top-left inside the FaIcon widget like so: Capture

    Any Idea to why this happens?

    opened by SeriousMonk 14
Releases(10.3.0)
  • 10.3.0(Dec 4, 2022)

  • 10.2.1(Sep 8, 2022)

  • 10.2.0(Sep 8, 2022)

  • 10.1.0(Mar 24, 2022)

  • 10.0.0(Mar 18, 2022)

    • Upgrade to Font Awesome icons 6.1.0
    • Update the configurator to work with version 6
    • Add alias support (Aliases may be old names of renamed icons. Since it is unclear if they are about to stay, aliases are marked as @Deprecated with a message containing the new icon name.)
    • Update FaIcon with the latest changes to flutter's default Icon
    • DEPRECATE duotone icon support for pro users
    • Fix linter warnings - thanks to @gslender!
    Source code(tar.gz)
    Source code(zip)
  • 10.0.0-beta(Oct 21, 2021)

    • Fix #132 FaIcon not centered when used as prefix icon

    This is a change with the goal to align FaIcon more like the standard Icon class. However, this may impose breaking changes, which is why version 10.0.0 will stay a beta for a while.

    Should you notice something not working as it did before, which does not match the behaviour of Icon, please open an issue!

    Source code(tar.gz)
    Source code(zip)
  • 9.2.0(Oct 20, 2021)

    • Upgrade to Font Awesome icons 5.15.4
    • Equalize windows and linux tool scripts
    • Reworked updater tool into a full-fledged configurator
      • Added support for ignoring styles
      • Added optional support for dynamic icon retrieval by name (thanks to @Mythar)
      • Fonts get enabled/disabled automatically based on availability and exclude list
    Source code(tar.gz)
    Source code(zip)
  • 9.1.0(Jun 9, 2021)

    • Add support for fa6's 360-degrees icon
    • Fix #154 FaDuotoneIcon explicitly requires IconDataDuotone
    • Use dart format instead of deprecated dartfmt in the updater
    • Automatically enable duotone icons in the example if possible
    • Upgrade to Font Awesome icons 5.15.3

    Thanks to @amkuchta for his work and input

    Source code(tar.gz)
    Source code(zip)
  • 9.0.0(Mar 19, 2021)

  • 8.12.0(Mar 13, 2021)

Owner
Flutter Community
A central place for all community made Flutter packages. To get started, see the README of the 'community' repository.
Flutter Community
The Line Awesome Icon pack available as Flutter Icons

line_awesome_icons The Line Awesome Icon pack available as Flutter Icons Getting Started This plugin is based on Line Awesome Icons pack, which you ca

Châu Minh Phúc 25 Oct 10, 2022
The COCO icon pack with - +600 Editable icons available for your flutter project.

cocoicons The COCO icon pack with - +600 Editable icons available for your flutter project. Made from COCO icon pack. ?? Installation In the dependenc

Samuel Abada 5 Sep 23, 2022
Icons Launcher - A command-line tool that simplifies the task of updating your Flutter app's launcher icon.

Icons Launcher - A command-line tool that simplifies the task of updating your Flutter app's launcher icon. Full flexibility allows you to only update the launcher icon for specific platforms as needed.

Mrr Hak 48 Nov 17, 2022
Flutter plugin to implement a Boom Menu, with icons, title, subtitle, animated FAB Icons and hide on scrolling.

Flutter Boom Menu Usage The BoomMenu widget is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton wi

Mohanraj 88 Aug 1, 2022
Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

Fluent UI System Icons Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft. Icon List View the full list of

Microsoft 4.3k Dec 29, 2022
Awesome aurora gradient - Awesome Aurora Gradients for flutter

Awesome Aurora Gradient Provides a simple but powerful gradient extension method

null 2 Feb 25, 2022
Awesome Notifications add-on plugin to enable push notifications through Firebase Cloud Messaging with all awesome notifications features.

Awesome Notifications FCM Awesome Notifications add-on to send push notifications using FCM (Firebase Cloud Messaging), with all awesome notifications

Rafael Setragni 8 Jan 4, 2023
Flutter application for latest news by top newspapers . And allow for share articles with friends. Now available in night mode. Also landscape mode is available

Breaking News Latest news for almost 55 country. Feature of saving article and search ariticles. Used API https://newsapi.org/ Note: if data is not ge

null 7 Oct 24, 2022
With this pack you can use the biometrics systems of Android and IOS devices.

native_auth With this pack you can use the biometrics systems of Android and IOS devices. It will ask for the user which the biometric authentication

Weliton Sousa 7 Nov 2, 2022
A font catalogue app made with flutter

Fontina An app which showcases a personally curated collection of fonts. Written in flutter, cross-platform and responsive. Uses the Fontgen API to di

Shreeyans Bahadkar 54 Nov 22, 2022
A font loader to download, cache and load web fonts in flutter with support for Firebase Cloud Storage.

Dynamic Cached Fonts A simple, easy to use yet customizable font loader to use web fonts. Demo: https://sidrao2006.github.io/dynamic_cached_fonts ?? I

Aneesh Rao 18 Dec 21, 2022
Flutter screen adaptation, font adaptation, get screen information

flutter_screenutil A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes! Note: This pl

OpenFlutter 3.4k Jan 6, 2023
Create bulk instagram quotes posts with custom background, style, font, size. built using flutter

Mini Canva minicanva.com Bulk Image Generator from given list of quotes, lines ?? Purpose Etsy is an E-commerce platform where we can sell digital goo

Ashish Pipaliya 7 Oct 29, 2022
Scale the entire UI design proportionally. Button, image, font, everything is scaled automatically

Scale the entire UI design proportionally. Button, image, font, everything is scaled automatically. Before: 250x250 square is the same size across dev

Wildcard 3 Sep 25, 2022
DDC Font App for iOS

DDC Font App for iOS This is the project code for DDC Font app. Do check out locally and update or refector the code with suitable message. Note on iO

Kinley Rabgay 2 Aug 31, 2022
A better font for golden tests.

A better font for golden tests. This project is a Flutter Bounty Hunters proof-of-concept. Want font adjustments? Fund a milestone today! Golden Brick

Flutter Bounty Hunters 3 Dec 14, 2022
Mel-bio - Build a Web App with Flutter with a rotating profile icon animation

Build a Web App with Flutter with a rotating profile icon animation. A simple we

Melissa Gu 1 Jul 5, 2022
A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField

icon_picker A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField Usage In the

m3uzz Soluções em TI 11 Sep 27, 2022