Style

Renders the provided StyleRules into css and wraps them with a <style> element.

To define a global <style> element with a set of style rules use the Style (without s) component in combination with a set of StyleRules (e.g. using the css() utility):

Style(styles: [
  css('#content', [
    css('&').box(width: 100.percent, height: 100.percent),
    css('a').text(color: Colors.green),
  ]),
  css('.red-text').text(color: Colors.red),
]);

renders to:

<style>
  #content {
    width: 100%;
    height: 100%;
  }

  #content a {
    color: green;
  }

  .red-text {
    color: red;
  }
</style>

Additionally read about:

  • The css() method and style rules.
  • The Styles class and css properties.