I have a custom made icon font .ttf which I use within my apps as IconData
, allowing for use the same way you would with Flutter’s built-in material icons.
My custom font class:
class MyIcons {
MyIcons._();
static const iconFontFamily = 'MyIcons';
static const iconFontPackage = 'my_icon_package';
/// edit_outline
static const IconData edit_outline = IconData(0xe000, fontFamily: iconFontFamily, fontPackage: iconFontPackage);
// etc
}
Usage:
Icon(
MyIcons.edit_outline,
size: 24,
)
And all works well within the app. However now I am trying to generate golden test files to ensure my icons work as expected after I’ve updated the .ttf, but the icons are always only replaced with the test Ahem font squares.
If I use Flutter’s default icons, and set uses-material-design: true
in the pubspec.yaml
, this allows the default icons to be rendered properly within the golden test files, however no matter what I try I cannot get my own icons to be rendered.
Other things I’ve tried and been unsuccessful with:
- eBay’s golden_toolkit package
- Loading assets within tests
- FontLoader and manually referencing the icons codepoint, fontFamily and package
Is there a way to do this?
3
Answers
I ended up solving the gotchas with this thanks to a related question here.
There is a way to have the best of both worlds where you can have your standalone font package and not have to declare your packaged font files in your app that is using it.
For example, we have a company branding/typography package which we use across multiple apps that contains all our pre-configured
TextStyle
declarations, and another standalone package which has custom generatedIconData
that is stored within a*.ttf
file (like FontAwesome).The package side:
pubspec.yaml
The packaged
TextStyle
:Golden test
Or if like me, you have the same issue with custom icons, the same can be done within your golden test for your custom
IconData
with a similar extension method, removing thefontPackage
value:Your app side
pubspec.yaml
main.dart
There is now no longer a need to declare your fonts within your apps
pubspec.yaml
, or even have the style package(s) within the same project/repository as your implementing app.Yes, it is possible, but you need to load the icon font manually just like any other custom font in flutter tests.
I used parts of a solution from the Flutter Gallery demo app:
https://github.com/flutter/gallery/blob/master/golden_test/testing/font_loader.dart
And for material icons I used a solution found here:
issue: https://github.com/flutter/flutter/issues/75391
code: https://github.com/flutter/flutter/pull/74131/files
Some gotchas are:
Given that there is a correctly set up custom font called ‘Matter’ and a correctly setup custom icon font that exists in a "fonts" directory in the root of the project –>
Demo code:
Resulting in:
Thanks to the other answers i was able to solve this problem for myself and found out, that it is possible to have a shorter solution for it. Without adding extension methods and special themeData for a golden test.
The following code snippet loads (icon-)/fonts from three different sources, a bundled asset, the material icons and fluent icons for windows.
I hope this code will help some of you in the future to have easier handling for golden tests.
flutter_test_config.dart