AdobeXD/xd-to-flutter-plugin

Need to avoid using the "Pin(size:" with fixed size value

Closed this issue · 1 comments

wmhseir3 commented

Bug Description

The full width scroll group if with Pin(size: 360, start: 0.0) is not in "Responsive Resize" situation when code is running in screenSize = Size(540.0, 960.0) device. The scroll group will only occupy 360/540 in width.

To Reproduce

  1. Artboard with width 360 and with scroll group in it.
  2. export all widgets with the following similar codes in places:.
    child: Pinned.fromPins(
    Pin(size: 360.0, start: 0.0),
    Pin(start: 120.0, end: 0.0),
    child: some_scrollgroup,
    ),
    3.run this exported codes as in the android devices (e.g. oppo a9 2020) with the following screen size information:
    screenSize = Size(540.0, 960.0), ratioHeight = 1.56875, ratioWidth = 1.5
    physicalSize = Size(1080.0, 1920.0), devicePixelRatio = 2.0, realWidth = 1080.0, realHeight = 2008.0

Versions:

  • OS: [WIN10]
  • XD: [42]
  • plugin: [2.0.0+1]
  • Flutter:
    [√] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale zh-TW)
    [√] Android toolchain - develop for Android devices (Android SDK version 30.0.0-rc1)
    [√] Android Studio (version 4.1.0)
gskinner commented

If I'm understanding the issue correctly, this is because XD does not support applying responsive resize to scroll groups.

It's a very unfortunate limitation, and I've mentioned it to them — it doesn't just limit the XD to Flutter plugin, but hinders the creation of responsive content in XD in general.

It's a bit subtle in the UI, but you can see that the "fixed width" control is on, but disabled for vertical scroll groups.

image

Definitely let Adobe know if this is causing issues in your workflow. In the interim (and I know this isn't ideal) you could easily tweak the generated Pin code. Something like this should work:

Pin(size: 360.0, start: 0.0) --> Pin(start: 0.0, end: 0.0)

Feel free to reopen if I missed something.