Implementing Flex Basis and Flex Grow to Flexible and Wrap
- Dominant language
- Dart
- Stars
- 179k
- Forks
- 31.1k
- PR merge metrics
- PR metrics pending
Description
### Use case
I'm still quite new to Flutter and my background is in web development with HTML, JS and CSS.
I wanted to implement a form in which the form fields have a minimum width and a preferred width so that if the form fields fit on one row according to their preferred width, they'll do so but if not they'll wrap to different rows. In all cases the items on a given row should take the full width of the row and if a row has items with differing preferred widths the width of the items should be in relation to their preferred widths.
However, even after a lot of research and experimentation, I wasn't able to create a solution that would fit these requirements. It was possible to get close with LayoutBuilder and a lot of manual calculation and custom wrapping classes for the children widgets but the solution still wasn't perfect and was rather complicated when compared to how simple it is to reach this UI behaviour in CSS.
Here's a codepen link to check how easy this sort of UI is in CSS: [Link](https://codepen.io/DottoVV/pen/PwZwvLL?editors=1100)
No packages I found in pub.dev/flutter were able to offer a solution that would handle cases such as different widgets as children or varying "preferred sizes".
### Proposal
Flex widgets such as Flexible would have a `flexBasis` param to control the "preferred size" of the widget and `flexGrow` to control the growth behaviour. The fit parameter might still be enough for most if not all use cases though and I believe the flexBasis to be more important of the two.
In addition, a new widget, possibly called `FlexibleWrap`, should be created to allow for using the Flexible widget inside a widget with the Wrap's wrapping functionality.
These additions would make flex layouts a lot more powerful and would get Flutter flex closer to feature parity with CSS.
Contributor guide
Assessment
This issue has not been assessed yet.