AdobeXD/xd-to-flutter-plugin

Add support for textHeightBehavior

Closed this issue · 11 comments

Boondoge commented

Hello, regarding the most recent version of this plugin, Adobe XD, and Flutter -- I've run into the export issue shown in the photo below:
image

Basically, SOME of the text gets cut off, but not all. What the connection is between the ones that display properly and the ones that do not, I can't say. But when I eliminate the parameter 'height: x.x,' altogether, everything displays fine.

This:
image

Changed to this on all the text definitions:
image

I get this:
image

Beautiful.

So, obviously this is a pain in the ass. If I want to make any changes to my design, I'll have to go and remove this parameter every time it's updated and exported from Xd to Flutter. Is there an option I can set in Adobe Xd that solves this inconsistency? You can see from the 1st image that certain text is fine, and when the code is examined they do not have a 'height: x.x,' parameter. Why is it given to some text, but not others?

gskinner commented

Thanks for the report @Boondoge!

The issue you're running into here is a tricky one. It arises due to differences in how Flutter and XD apply line heights. In short: XD ignores line height on the first line, but Flutter does not.

In your example, the "SHARE" text in XD has a line height of 24, which is translated to a Flutter line height of 2 (Flutter uses a multiple of fontSize). In XD, that line height has no effect on the first (only) line, but in Flutter it shifts it down by 12 pixels.

The easy workaround is to remove the line height from those text fields in XD.

I'd love to find a fix on the plugin side, but haven't been able to yet. I previously had some logic that would move the Text in Flutter upward to offset the first line, but this causes all kinds of issues with responsive layout.

I might look at adding some fuzzy logic that determines if a text field is a single line based on height (I don't want to make assumptions based on specific content), and excludes the line height in that case. It could get a bit weird in some cases though (I slightly increase the height of a text element in XD, and suddenly the text shifts vertically in Flutter).

Another option could be to either write our own extension to Text (XDText or something) that fixes it, or maybe even to see if the Flutter team would accept a pull request to add this option directly to Text (ex. Text(firstLineHeight: 0) or similar).

  • 👍1
gskinner commented

Did some digging. Looks like earlier this year someone else had the same idea, and submitted a PR which has been accepted. Awesome! I'll add support for this in the next release:

https://api.flutter.dev/flutter/dart-ui/TextHeightBehavior-class.html

  • 🎉1
gskinner commented

Alternately, we could set this at the view level, though it is less specific, and may result in confusion:
theme.typography.defaultTextHeightBehavior,

  • 😕1
Boondoge commented

The easy workaround is to remove the line height from those text fields in XD.

It makes sense to me that Xd is the master for design parameters. If that means massaging how the work is done in Xd to ensure proper export over to Flutter, I'm game. That being said, could you elaborate on what you mean? I do not see a way to remove or alter the line height from the Xd UI, other than font size or the height of the box itself. The height of the box cannot be removed. Changing it to 0 is not possible.

gskinner commented

This image shows where line spacing lives in XD (the "99" value). It's not terribly intuitive, but if you set that value to "0", it will display a – to indicate it is using default line spacing.

image

  • 🚀1
Boondoge commented
image

Hmm, this does not work for me. Setting line spacing to 0 reverts back to previous line spacing setting. However, if I take your statement literally and use "0" (quotes included) the value does not revert back and the line spacing is unaffected. Is that what you mean?

gskinner commented

Hmm. With a bit more testing, I'm seeing two different results in XD for resetting the line spacing, neither of which matches what you're seeing.

Here's the test I'm using: Select a multiline text field, set it's line spacing to something obvious (ex. 99), deselect the field (just to be sure it gets set), reselect the field, set the line spacing to 0. The two behaviors I've seen are:

  1. Replaces the 0 with a dash –.
  2. Replaces the 0 with the "default" line spacing for that font size.

Either of these outcomes seem to work correctly with the plugin (it is recognized as having no line spacing).

  • 👀1
gskinner commented

I've added support for this in ef81b9d. It will be in the next release.

image

Boondoge commented

Hmm. With a bit more testing, I'm seeing two different results in XD for resetting the line spacing, neither of which matches what you're seeing.

Here's the test I'm using: Select a multiline text field, set it's line spacing to something obvious (ex. 99), deselect the field (just to be sure it gets set), reselect the field, set the line spacing to 0. The two behaviors I've seen are:

1. Replaces the `0` with a dash `–`.

2. Replaces the `0` with the "default" line spacing for that font size.

Either of these outcomes seem to work correctly with the plugin (it is recognized as having no line spacing).

I am wondering now if we're using different operating systems. I'm on Windows 10, are you on MacOS? Here's a gif (sorry for poor quality) of what happens for me:
ezgif com-video-to-gif

An odd thing does occur, where after setting the line height to 99, it jumps back to 32 when I put in 0. I wonder if this is my Xd's version of default?

gskinner commented

Yes, that's correct. Just enter 0 and it will use the default value.

  • ❤️1
gskinner commented

Added in v1.1.0