Implementing Flex Basis and Flex Grow to Flexible and Wrap

[OttoLaitinen]

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

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.

[darshankawar]

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.

@OttoLaitinen Can you check if this community package helps to serve this proposal ?

[OttoLaitinen]

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.

@OttoLaitinen Can you check if this community package helps to serve this proposal ?

Though the flexible_wrap community package somewhat resembles a solution to the use case I presented, it misses a couple of important things:

1. The scope of the package seems to be a replacement or an alternative for Flutter's GridView widget, not so much as a Wrap alternative.
2. The community package wouldn't achieve the benefits that a more integrated solution to the internal Flexible widget would achieve (adding flexBasis and flexGrow). Adding the functionality to the Flexible widget would make it possible to use the added functionality also in single row and single column layouts, which would mean a better feature parity with arguably the most popular UI description language CSS.
3. Even if the community package was taken towards a direction where it is more of a replacement/alternative for Wrap, the community package in its current state is only able to render Widgets of the same size, and it doesn't support taking in Flexible widgets, which could host the flexBasis and flexGrow information.

That said, it might be possible (with more Flutter and Dart knowledge than what I currently possess) to achieve the necessary functionality even with a community package. However, I personally think that implementing these functionalities into Flutter's core should be how this issue is tackled. The flexBasis and flexGrow (and flexShrink) have been supported in the web and in React Native for over 10 years and are a basic building block for UI development which should be found also in Flutter.