Custom Widget's mandatory width and height does not allow for dynamic content

goerlitz commented 9 months ago

Has your issue been reported?

[X] I have searched the existing issues and confirm it has not been reported.
[X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

When creating a custom widget it is mandatory to define width and height for the widget (as a fixed value, percentage, or full screen size (infinity)).

However, for a custom widget with dynamic content, the width or height cannot be known in advance. Therefore, it is currently impossible to automatically render the custom widget having the exact size as the components inside the widget.

Expected Behavior

It should be possible to show a custom widget with exactly the size it requires to display all its content without explicitly setting the width and height.

Steps to Reproduce

Go to this project and try to make the custom widget "NutritionTable" show the full table without having any extra white space around it.

Reproducible from Blank

[X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT4Wlc/qx89OxL1E0M/UcvkwmmA5JmY1auYrjsN9SgAaF7GqOqYPXPykP1doTcOiTFZYMFv8nmE0+d6PktrLFuQHAAeuRrpayJFycDnKQk6jbK6OCKq8SXJ8I8FmJEuV0p+vrBEmNulZdH9n2FyYAOvIdB3fK7n7IjE/AMikNZL+nGiqAhm6Xn0Jg1ZSfCvr

Context

It is a show stopper if custom widgets with dynamic content cannot be displayed as intended.

Visual documentation

See screen shots in https://community.flutterflow.io/ask-the-community/post/custom-widget-with-flexible-height-1QJIp1c4eUyIURx

Additional Info

No response

Environment

- FlutterFlow v4.0 released January 15, 2024
- Flutter version is 3.13.7
- Platform: MacBook Pro
- Browser name and version: Chrome (latest)
- Operating system and version affected: MacOS

hariprasadms commented 9 months ago

Hi @goerlitz - Thanks for submitting the issue. You're correct that the current state of custom widget height and width can't be changed dynamically. This aligns with the current design. However, a workaround involves defining variables and mapping their values to the width and height of the widget. Keep in mind that this workaround is a general approach and may vary based on the specific design of the custom widget.

goerlitz commented 9 months ago

Hi @hariprasadms, for some reason I cannot see the customHeight and customWidth field.

Can you also explain, how the workaround with "defining variables and mapping their values to the width and height of the widget" would work? Assume that my custom widget dynamically renders n table rows based on the parameters that I pass in. How could I calculate the total height of the widget after rendering the n table rows and assign that value to a variable (which is then passed into the customHeight)?

ff_custom_widget_custom_height

hariprasadms commented 9 months ago

Hi @goerlitz - Did you try without adding height and width in the custom widget code when height and width parameters are associated. Try this and let us know please ?

goerlitz commented 9 months ago

@hariprasadms , sorry, I don't get what you mean? The code for the Custom Widget is here: https://app.flutterflow.io/project/custom-widget-issue-91qy8w?tab=customCode&customCodeTab=widgets

I also added the extra parameter customHeight. But how can that variable be used to make the Custom Widget exactly as big as needed for rendering the dynamic number of table rows?

hariprasadms commented 9 months ago

HI @goerlitz -

Please disable the "Enforce Width and Height" option as it doesn't take into account the specified height and width in the property section during runtime. Kindly read the note for more information.

Here's a sample code and preview I've created for your specific case. Feel free to customize it according to your requirements. I've set the width to 80% of the screen size, as it remains constant.

Here is the code to copy - https://gist.github.com/hariprasadms/40a193b44bc2d338556150fa2a8dc198

I hope this can help you.

goerlitz commented 9 months ago

Thanks for the code and explanations.

It turned out that I just had to turn off "Enforce Width and Height". I think I never really tried to run this in test mode, because of the big warning text and not seeing any change in the editor UI.

Here are two videos to show what different is makes in my case.

The first one is with "Enforce Width and Height.
The second one with "Enforce Width and Height" disabled - exactly how it should be.

I just don't understand why the second option is not the default behavior? It took quite some time to figure out why it was not working as expected because. It think the behavior of "Enforce Width and Height" is not that obvious and not really explained in any tutorial video I saw.

https://github.com/FlutterFlow/flutterflow-issues/assets/2389436/4a8de7fc-7c98-4e97-940e-21750749efc9

https://github.com/FlutterFlow/flutterflow-issues/assets/2389436/dadbb245-9d03-44cd-a097-435653c5093f

meetwudi commented 7 months ago

I turned off "Enforce Width and Height" but still get this blocking error. It won't let me compile the app. @hariprasadms @goerlitz Do you know how to work around this error?

meetwudi commented 7 months ago

Ah I understand now - I still need to set height to a random fixed number, and leave "Enforce width and height" unchecked.

goerlitz commented 7 months ago

Ah I understand now - I still need to set height to a random fixed number, and leave "Enforce width and height" unchecked.

@tjwudi exactly :)

FlutterFlow / flutterflow-issues