LRow constructor

const LRow(
  1. {Key key,
  2. List<LColumn> columns = const <LColumn>[],
  3. bool useMediaQuery = true,
  4. LRowAxis axis = const LRowAxis(),
  5. double gutter,
  6. EdgeInsets margin,
  7. MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  8. MainAxisSize mainAxisSize,
  9. CrossAxisAlignment crossAxisAlignment,
  10. TextDirection textDirection,
  11. TextBaseline textBaseline,
  12. LGridMode mode = LGridMode.fixedSize}
)

Creates a responsive Row

Liquid's LRow is based on 12 column grid

if mode is LGridMode.fixedSize LColumns will take fixed size width for defined breakpoints. Below example, the column will take ~8.33% width of their parent in each breakpoint.

example:

LRow(
  mode: LGridMode.fixedSize, // default
  columns: [
    LColumn(
      xs: 1,
      sm: 1,
      md: 1,
      lg: 1,
      xl: 1,
      children: <Widget>[
        Container(height: 50.0),
      ],
    ),
    LColumn(
      xs: 1,
      sm: 1,
      md: 1,
      lg: 1,
      xl: 1,
      children: <Widget>[
        Container(height: 50.0),
      ],
    )
  ],
),

if mode is LGridMode.ratio LColumns will take width according to the ratio for defined breakpoints. Below example, the first column and second column will take ~16.66% and ~83.33% width respectively of their parent when breakpoint lg is triggered, otherwise by default each column will take equal spacing

example:

LRow(
  mode: LGridMode.ratio,
  columns: [
    LColumn(
      lg: 1,
      children: <Widget>[
        Container(height: 50.0),
      ],
    ),
    LColumn(
      lg: 5,
      children: <Widget>[
        Container(height: 50.0),
      ],
    )
  ],
),

NOTE:

  • By default, each column will take equal spacing if breakpoints are not specified.
  • If any breakpoint not specified in LColumn, mode is ignored for that breakpoint.
  • By default, columns are vertical on xs unless at least one column has xs defined
  • If at any breakpoint, the total sum of breakpoint is greater than 12, LGridMode.ratio will be used even if mode is set to other value

Implementation

const LRow({
  Key key,
  this.columns = const <LColumn>[],
  this.useMediaQuery = true,
  this.axis = const LRowAxis(),
  // this.cols,
  this.gutter,
  this.margin,
  this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize,
  this.crossAxisAlignment,
  this.textDirection,
  this.textBaseline,
  this.mode = LGridMode.fixedSize,
})  : assert(mode != null),
      assert(columns != null),
      assert(columns.length > 0,
          "You need to add atleast one column to the LRow"),
      assert(columns.length <= _kColumnCount,
          "Only $_kColumnCount Columns are allowed in each LRow"),
      assert(useMediaQuery != null),
      super(key: key);