💬
Get Help
SS
Spessle Student Team

Dynamic Payment Expansion Tab

Widgets & Design

I have a payment tab for my checkout page which users should be able to expand to see the payment details. There are two issues I can't figure out. First, how to dynamically change the height of the tab when I expand it. Second, how to dynamically change the y-axis position of the tab so it always stays aligned to the bottom of the page.

As you can see below when I expand the tab, it gets cut off.

For more context, the tab is a custom component I designed. The expansion action is controlled by the arrow toggleIcon and the isExpanded app state variable.

What have you tried so far?

So far, I tried updating the height of the custom component so that it is 40px when it is not expanded, and 200 when it is expanded. (Disregard the difference in variable names, isPaymentExpanded is the same as isExpanded, I just created a duplicate compnent for test purposes).

The main issue with this is that the height can only expand to a set amount of 200px. But the expanded payment text might not be the same every time, meaning sometimes it might just expand to show subtotal and sales tax, or sometimes it might also include delivery cost if applicable. Therefore, I need a way for the height to change dynamically based on the amount of content in the component.

I have yet to try anything regarding the y-axis. Any help would be appreciated!

Did you check FlutterFlow's Documentation for this topic?
Yes
1
1 reply