$divCenteredContent function

DIVElement $divCenteredContent({ Object? classes, String? style, String width = '100%', String height = '100%', String? cellsClasses, String? cellsStyle, String? cellSpacing, int? cellsPerRow, List? cells, List? rows, Object? content, })

Creates a div that centers vertically and horizontally using display table and table-cell.

Implementation

DIVElement $divCenteredContent({
  Object? classes,
  String? style,
  String width = '100%',
  String height = '100%',
  String? cellsClasses,
  String? cellsStyle,
  String? cellSpacing,
  int? cellsPerRow,
  List? cells,
  List? rows,
  Object? content,
}) {
  var cssDimension = '';
  if (isNotEmptyString(width)) cssDimension += 'width: $width;';
  if (isNotEmptyString(height)) cssDimension += 'height: $height;';

  var divStyle = 'display: table;$cssDimension';

  if (isNotEmptyString(style, trim: true)) {
    style = style!.trim();
    if (!style.endsWith(';')) style += ';';
    divStyle += ' ; $style';
  }

  if (isNotEmptyString(cellSpacing, trim: true)) {
    divStyle += ' ; border-spacing: $cellSpacing ;';
  }

  cellsStyle ??= '';
  cellsStyle = cellsStyle.trim();

  cellsClasses ??= '';
  cellsClasses = cellsClasses.trim();

  rows ??= [];

  if (cells != null) {
    if (cellsPerRow == null || cellsPerRow <= 0) {
      rows.add(cells);
    } else {
      var row = [];
      for (var i = 0; i < cells.length; ++i) {
        var cell = cells[i];
        row.add(cell);
        if (row.length == cellsPerRow) {
          rows.add(row);
          row = [];
        }
      }
      if (row.isNotEmpty) {
        rows.add(row);
      }
    }
  }

  var list = [];

  for (var row in rows) {
    var rowList = row is List ? row : [row];

    var rowCells = rowList
        .map((e) => $div(
              classes: cellsClasses,
              style:
                  'display: table-cell; text-align: center; vertical-align: middle; $cellsStyle',
              content: e,
            ))
        .toList();

    var rowDiv = $div(
      style: 'display: table-row;',
      content: rowCells,
    );

    list.add(rowDiv);
  }

  if (content != null) {
    list.add($div(
      classes: cellsClasses,
      style:
          'display: table-cell; text-align: center; vertical-align: middle; $cellsStyle',
      content: content,
    ));
  }

  return $div(classes: classes, style: divStyle, content: list);
}