Add support for fill, weight, grade, and optical size to `Icon` #106896

guidezpl · 2022-06-30T19:24:08Z

This PR adds framework support required for Material Symbols (design doc, #102560).

Add 4 members to Icon: fill, weight, grade, and opticalSize. Under the hood, pass these to the engine using the FontVariation API. No guarantees are provided:

If used with a font which does not support these axes => no effect

No bounds checking for values against the font ⇒ no effect outside variable font's supported range

Add 4 corresponding members to IconThemeData to customize all icons in a given widget subtree.

Also:

debugFillProperties is completed
properties are reordered for consistency
documentation is improved

Tests

Basic bounds checking
Instantiation
Fallbacks

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

…support

HansMuller · 2022-07-11T17:36:56Z

packages/flutter/lib/src/widgets/icon.dart

  ///
-  /// Defaults to the current [IconTheme] color, if any.
+  /// Requires the underlying icon font to support the `FILL` [FontVariation]


This is a little bit confusing because the developer may not know anything about the default icon font. Can we help them out a little? Here and elsewhere.

Answered elsewhere. I can point out that font file names often include the supported axes

HansMuller · 2022-07-11T17:38:05Z

packages/flutter/lib/src/widgets/icon.dart

-  /// The color (whether specified explicitly here or obtained from the
-  /// [IconTheme]) will be further adjusted by the opacity of the current
-  /// [IconTheme], if any.
+  /// Can be used to convey a state transition for animation or interaction.


Not sure what this means. We support animating an icon's fill property?

Yes. Material Symbols does it starting from the middle, going in/out a square shape.

HansMuller · 2022-07-11T17:40:58Z

packages/flutter/lib/src/widgets/icon.dart

+  /// Grade and [weight] both affect a symbol's stroke weight (thickness), but
+  /// grade has a smaller impact on the size of the symbol.
+  ///
+  /// Grade is also available in some text fonts. One can match grade levels


How does one know if a font supports grade? Similarly, can we make any guarantees about the default text styles (the default Material TextTheme?)

Making sense of this seems particularly difficult for someone who's just reading this bit of API doc. Maybe we could include a link to something that covers the topic in depth?

There's a convention Google Fonts uses to put the axes in the font file name, it's not obligatory but can help, e.g. MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf. I can't find any docs about it right now.

No guarantees for text yet since this PR concerns only icons. Roboto ⇒ Roboto flex is something to do in the future.

https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts might be a good link

darrenaustin

Looks good. Just a question and request for defaults to be documented.

packages/flutter/lib/src/cupertino/icon_theme_data.dart

packages/flutter/lib/src/widgets/icon.dart

darrenaustin

LGTM. Thx.

…n` (flutter/flutter#106896)

…ter#106896) * wip * update documentation * x * remove trailing spaces * x * remove useless CupertinoIconThemeData copyWith override * add tests * remove trailing spaces * fix isConcrete * x * x * x * remove trailing spaces * tweak docs * mention that font filenames often indicate the supported axes * add back cupertino IconThemeData copyWith * update copyWith

wip

2904f35

flutter-dashboard bot added the framework flutter/packages/flutter repository. See also f: labels. label Jun 30, 2022

update documentation

0d712d7

guidezpl changed the title ~~Material Symbols support~~ Add support for fill, weight, grade, and optical size to Icon Jun 30, 2022

guidezpl added 9 commits June 30, 2022 15:35

x

0cfcc9f

remove trailing spaces

151aacf

x

d940b94

remove useless CupertinoIconThemeData copyWith override

2287e46

add tests

31f4fc8

Merge remote-tracking branch 'upstream/master' into material-symbols-…

7b3b560

…support

remove trailing spaces

7f90239

fix isConcrete

bbafd80

x

fc63cd1

flutter-dashboard bot added the f: cupertino flutter/packages/flutter/cupertino repository label Jul 11, 2022

guidezpl added 4 commits July 10, 2022 23:12

x

0bbcd6c

x

380b373

remove trailing spaces

f314a9b

tweak docs

2b9b974

guidezpl marked this pull request as ready for review July 11, 2022 13:41

guidezpl requested review from HansMuller and darrenaustin July 11, 2022 13:42

HansMuller reviewed Jul 12, 2022

View reviewed changes

mention that font filenames often indicate the supported axes

ee02a4f

guidezpl requested a review from HansMuller July 15, 2022 22:00

darrenaustin suggested changes Jul 19, 2022

View reviewed changes

packages/flutter/lib/src/cupertino/icon_theme_data.dart Show resolved Hide resolved

packages/flutter/lib/src/widgets/icon.dart Show resolved Hide resolved

add back cupertino IconThemeData copyWith

dab45ef

darrenaustin approved these changes Jul 20, 2022

View reviewed changes

update copyWith

171e5e6

guidezpl merged commit be3802c into flutter:master Jul 20, 2022

guidezpl deleted the material-symbols-support branch July 20, 2022 01:27

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 22, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

80260d9

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 22, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

359b6d0

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 22, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

d56dbf1

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 22, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

1eca4c4

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Jul 22, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

a83cc4f

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 23, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

f62ec24

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 23, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

c65274c

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 24, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

c774459

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 24, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

95a0ea8

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

cd57a3b

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

12c7333

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

9dccfbc

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

6abba93

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

521973a

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

7d512e8

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

0fe9c26

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

db12a77

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

e5137ab

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

495c7f2

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

f2d3844

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

3ae3876

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

549bab1

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

fa8de3f

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

7485318

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

c127ac3

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

dbb7820

…n` (flutter/flutter#106896)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

be3802c Add support for fill, weight, grade, and optical size to `Ico…

c64572b

…n` (flutter/flutter#106896)

guidezpl mentioned this pull request Aug 8, 2022

Add support for font variation based theming to Icon #109140

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add support for fill, weight, grade, and optical size to `Icon` #106896

Add support for fill, weight, grade, and optical size to `Icon` #106896

Uh oh!

guidezpl commented Jun 30, 2022 •

edited

Loading

Uh oh!

HansMuller Jul 11, 2022

Uh oh!

guidezpl Jul 14, 2022

Uh oh!

HansMuller Jul 11, 2022

Uh oh!

guidezpl Jul 14, 2022

Uh oh!

HansMuller Jul 11, 2022

Uh oh!

guidezpl Jul 14, 2022

Uh oh!

davelab6 Aug 1, 2022

Uh oh!

darrenaustin left a comment

Uh oh!

Uh oh!

Uh oh!

darrenaustin left a comment

Uh oh!

Uh oh!

Add support for fill, weight, grade, and optical size to Icon #106896

Add support for fill, weight, grade, and optical size to Icon #106896

Uh oh!

Conversation

guidezpl commented Jun 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests

Pre-launch Checklist

Uh oh!

HansMuller Jul 11, 2022

Choose a reason for hiding this comment

Uh oh!

guidezpl Jul 14, 2022

Choose a reason for hiding this comment

Uh oh!

HansMuller Jul 11, 2022

Choose a reason for hiding this comment

Uh oh!

guidezpl Jul 14, 2022

Choose a reason for hiding this comment

Uh oh!

HansMuller Jul 11, 2022

Choose a reason for hiding this comment

Uh oh!

guidezpl Jul 14, 2022

Choose a reason for hiding this comment

Uh oh!

davelab6 Aug 1, 2022

Choose a reason for hiding this comment

Uh oh!

darrenaustin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

darrenaustin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Add support for fill, weight, grade, and optical size to `Icon` #106896

Add support for fill, weight, grade, and optical size to `Icon` #106896

guidezpl commented Jun 30, 2022 •

edited

Loading