xd-to-flutter-plugin icon indicating copy to clipboard operation
xd-to-flutter-plugin copied to clipboard

Scroll Group (Panning)

Open appify-pro opened this issue 4 years ago • 8 comments

I have created a simple text box that displays perfectly in Android Studio, however when I turn the text box into a scroll group the text box does not display anymore after hot reload.

In XD I receive the following error: 1 Error: [Scroll Group 1] Unable to create export node from none named 'ScrollableGroup'.

appify-pro avatar Apr 08 '21 07:04 appify-pro

We currently don't support ScrollableGroup in the plugin, though I would like to add support if the APIs are there to support it (I think they are now). I'll check if we can make a quick update to turn that into a warning and preserve the child content as an immediate fix for the impending next version, and look into proper support for the following version (which should follow fairly quickly).

gskinner avatar Apr 16 '21 21:04 gskinner

Ok. I've looked into this, but unfortunately it looks like XD's API for ScrollableGroup is incomplete in that it does not provide a way to access the dimensions of the scrolling content. For example, for a vertically scrolling list, .localBounds.height, .boundsInParent.height, and .viewport.viewportHeight all appear to the height of the viewport (cropped area). This seems like it's probably a bug, since there is no reason to replicate localBounds.height into viewport.

I'd expect a property like .viewport.contentHeight to exist. We could potentially work around this by iterating through every child and getting the union of their boundsInParent, but that seems like it should be unnecessary.

For now I have added a warning for scroll groups. Time permitting, I may add the iterative bounds calculation so we don't have to wait on Adobe to add this value. If that works out, I may be able to sneak in horizontal & vertical scrolling for the next version, but likely not panning (which requires a different Flutter output).

gskinner avatar Apr 17 '21 20:04 gskinner

Alright, I worked around the issues above by iteratively calculating the merged bounds, and then manually adjusting child positions based on the scroll offset (XD treats scrollable content as content that has moved, not as content that has been scrolled).

Horizontal and vertical scrolling now appear to be working well and will be in the next release. Panning should land in the following version.

gskinner avatar Apr 18 '21 16:04 gskinner

That's great news Grant

Thank you very much, will be trying it out today. It's such an important feature!

Regards

Paul

-------- Original Message --------

	SUBJECT:
	Re: [AdobeXD/xd-to-flutter-plugin] Scroll Group (#106)

	DATE:
	2021-04-18 18:46

	FROM:
	Grant Skinner ***@***.***>

	TO:
	AdobeXD/xd-to-flutter-plugin 

@.***>

Alright, I worked around the issues above by iteratively calculating the merged bounds, and then manually adjusting child positions based on the scroll offset (XD treats scrollable content as content that has moved, not as content that has been scrolled).

Horizontal and vertical scrolling now appear to be working well and will be in the next release. Panning should land in the following version.

-- You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [1], or unsubscribe [2].

Links:

[1] https://github.com/AdobeXD/xd-to-flutter-plugin/issues/106#issuecomment-822021858 [2] https://github.com/notifications/unsubscribe-auth/ANX5WP2IXW2VHRI5QISAJR3TJMEHRANCNFSM42SJRN5Q

appify-pro avatar Apr 19 '21 13:04 appify-pro

Hi Grant

Seems that your fix is working! Thank you!

appify-pro avatar Apr 20 '21 06:04 appify-pro

Just to confirm - are you testing the plugin built from source code? This feature isn't in the public plugin quite yet.

gskinner avatar Apr 20 '21 15:04 gskinner

Horizontal and vertical scroll groups shipped in v2.0.0, but I'd still like to add support for panning, so I'm going to leave this open.

gskinner avatar May 03 '21 16:05 gskinner

Brilliant, thanks Grant!

appify-pro avatar May 05 '21 06:05 appify-pro