Hi, I am pretty impressed by what you did with responsive_ui. Someone who is coming from bootstrap will find it right at home using your library.

I am looking to build Angular FlexLayout for Flutter I think the API is a lot more flexible than bootstrap.

Responsive API - https://github.com/angular/flex-layout/wiki/Responsive-API

I appreciate it if you have any advice/ideas on how to accomplish the example shown below, or if you want to collaborate. I would be more than happy to be a part of it.

Psuedo Code

FxLayout (
 layout: FxLayout.row,
 mainAxisAlign: FxLayoutAlign.center,
 crossAxisAlign: FxLayoutAlign.center,
 gap: FxSize(size: 10, unit: FxUnit.dp /*default*/)
  children: [
    FxFlex (
      fill: true
       order: 0,
       align: FxFlexAlign.start,
       child: Text('1st Child'),
     ),
    FxFlex (
       order: 1,
       align: FxFlexAlign.center,
       size: FxSize(size: 90, unit: FxUnit.percentage ),
       child: Text('2nd Child'),
     )
  ]
)

Cheers!

I runSpacing is not getting applied.
Responsive( runSpacing: 50, children: [ Div( colL: 4, child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: 200, color: Colors.red, ) ], ), ), Div( colL: 4, child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: 200, color: Colors.green, ) ], ), ), Div( colL: 4, child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: 200, color: Colors.blue, ) ], ), ), ], ), ![Screenshot_20210308_154830](https://user-images.githubusercontent.com/17794380/110308213-dcb61d80-8025-11eb-949e-7f59e9c54fbc.png)

Hi thankyou for amazing library, if it possible to add horizontal spacing because this is wrap for container ?

Description of issue

I have two responsive containers that I am displaying, defined below:

Responsive(
              children: [
                Div(
                  divison: const Division(colS: 3, colM: 3, colL: 1, colXL: 1),
                  child: Container(
                    padding: EdgeInsets.zero,
                    margin: EdgeInsets.zero,
                    height: 100,
                    color: Colors.black,
                  ),
                ),
                Div(
                    divison:
                        const Division(colS: 9, colM: 9, colL: 11, colXL: 11),
                    child: Container(
                      height: 100,
                      padding: EdgeInsets.zero,
                      margin: EdgeInsets.zero,
                      color: Colors.red,
                    )),
              ],
            ),

It appears as though, when all of the divisions add up to 12 perfectly, the calculations that occurs to determine the width of each widget causes glitches.

Upon further investigation, it seems to be an issue with the calculations of the childWidth
There are some cases (due to the division/multiplication of floating point numbers) that the child width ends up being a few 10ths of a pixels wider than it should be causing the wrap to put it into the bottom section. This causes the sum of all the box widths to end up being a bit larger than the total available width (provided by layout builder)

I have a working solution and will open a pull request.