Component.wrapElement constructor

const Component.wrapElement({
  1. Key? key,
  2. String? id,
  3. String? classes,
  4. Styles? styles,
  5. Map<String, String>? attributes,
  6. Map<String, EventCallback>? events,
  7. required Component child,
})

Creates a component which applies its parameters (like classes, styles, etc.) to its direct child element(s).

This does not create a html element itself. All properties are merged with the respective child element's properties, with the child's properties taking precedence where there are conflicts.

Example:

return Component.wrapElement(
  classes: 'wrapping-class',
  styles: Styles(backgroundColor: Colors.blue, padding: Padding.all(8.px)),
  child: Component.element(
    tag: 'div',
    classes: 'some-class',
    styles: Styles(backgroundColor: Colors.red),
    children: [
      Component.text('Hello World'),
    ],
  ),
);

Renders:

<div class="wrapping-class some-class" style="padding: 8px; background-color: red;">
  Hello World
</div>

Implementation

const factory Component.wrapElement({
  Key? key,
  String? id,
  String? classes,
  Styles? styles,
  Map<String, String>? attributes,
  Map<String, EventCallback>? events,
  required Component child,
}) = _WrappingDomComponent;