LColumn constructor

LColumn(
  1. {Key key,
  2. LBoxVisibility visibility = const LBoxVisibility(),
  3. int xs,
  4. int sm,
  5. int md,
  6. int lg,
  7. int xl,
  8. List<Widget> children = const [],
  9. bool flexible = true,
  10. bool expanded = false,
  11. MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  12. MainAxisSize mainAxisSize = MainAxisSize.min,
  13. CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  14. TextDirection textDirection,
  15. TextBaseline textBaseline}
)

Creates a responsive column

Generally, used in LRow

Below example,

  • The columns will take ~8.33% width of their parent in xs breakpoint.
  • The columns will take ~16.66% and ~8.33% width of their parent in each sm breakpoint.
  • The columns will take ~24.99% width of their parent in each md breakpoint.
  • The columns will take 50% width of their parent in each lg breakpoint.
  • The columns will take ~66.64% and ~33.32% width of their parent in each xl breakpoint.

example:

LRow(
  columns: [
    LColumn(
      xs: 1,
      sm: 2,
      md: 3,
      lg: 6,
      xl: 8,
      children: <Widget>[
        Container(height: 50.0),
      ],
    ),
    LColumn(
      xs: 1,
      sm: 1,
      md: 3,
      lg: 6,
      xl: 4,
      children: <Widget>[
        Container(height: 50.0),
      ],
    )
  ],
),

NOTE:

  • By default, each breakpoint value will be auto determined to take equal width.
  • If any breakpoint not specified in LColumn, mode is ignored for that breakpoint.
  • By default, columns are vertical on xs. To Change this use axis property of LRow to decide Columns rendering direction in LRow

See Also:

  • LRow, A Responsive Row that uses LColumn as its children

Implementation

LColumn({
  Key key,
  this.visibility = const LBoxVisibility(),
  this.xs,
  this.sm,
  this.md,
  this.lg,
  this.xl,
  this.children = const [],
  bool flexible = true,
  bool expanded = false,
  this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize = MainAxisSize.min,
  this.crossAxisAlignment = CrossAxisAlignment.center,
  this.textDirection,
  this.textBaseline,
})  : assert(children != null),
      assert(xs == null || (xs <= 12 && xs >= 1)),
      assert(sm == null || sm <= 12 && sm >= 1),
      assert(md == null || md <= 12 && md >= 1),
      assert(lg == null || lg <= 12 && lg >= 1),
      assert(xl == null || xl <= 12 && xl >= 1),
      assert(expanded != null && flexible != null),
      _flexible = flexible,
      _expanded = expanded,
      super(key: key);