Skip to content

How To Use Style

Jump to bottom
Matthew Whitaker edited this page May 12, 2023 · 1 revision

The style Parameter

In 1.0.0, most elements can be styled and customized with basic CSS styles without worrying about customRender. The style parameter is a powerful tool for customizing your HTML/Flutter page.

Basic Usage

style takes in a Map<String, Style> (A map of CSS selectors to Style objects). Styles are automatically cascaded, so inherited values are automatically applied to children elements (e.g. you don't need to explicitly set the color of the child of a <p> tag if you've set the color of the <p> tag itself.)

Example: Styling HTML

Html(
  data: ...,
  style: {
    "h1": Style(
      fontFamily: 'serif',
      backgroundColor: Colors.black,
      color: Colors.white,
    ),
    "p": Style(
      border: Border(bottom: BorderSide(color: Colors.grey)),
      padding: const EdgeInsets.all(16),
      fontSize: FontSize.larger,
    ),
    "p > a": Style(
      textDecoration: TextDecoration.none,
    ),
    "#footer": Style(
      display: Display.BLOCK,
      whiteSpace: WhiteSpace.PRE,
      backgroundColor: Theme.of(context).primaryColor,
      fontWeight: FontWeight.bold,
    ),
  },
),

Available CSS Selectors:

All basic CSS selectors and a few advanced CSS selectors are available for styling your HTML document. Below is a list of some of the basic CSS selectors this library supports. There are more selectors available than those listed here.

  • *
  • element
  • element, otherelement, ...
  • .class
  • #id
  • element > childelement
  • element descendantelement
  • And more...

The Style Class

The Style class represents all the available CSS properties of any element. All available CSS attributes are included in this class, and any styling beyond what is available in the Style class should use customRender instead.

Available Style parameters:

  • Color backgroundColor
  • Color color
  • Displaydisplay
  • String fontFamily
  • FontSizefontSize
  • FontStyle fontStyle
  • FontWeight fontWeight
  • double height
  • ListStyleTypelistStyleType
  • EdgeInsets padding
  • EdgeInsets margin
  • TextDecoration textDecoration
  • TextDecorationStyle textDecorationStyle
  • VerticalAlignverticalAlign
  • WhiteSpacewhiteSpace
  • double width

The following are currently available but may be changed in an upcoming version since they don't directly correlate with a CSS attribute:

  • String before
  • String after
  • TextDirection textDirection
  • Border border
  • Alignment alignment
  • String markerContent

Display

There are four options available for Display. They behave in the same way that the correlated CSS options behave on the web:

  • Display.BLOCK
  • Display.INLINE
  • Display.INLINE_BLOCK
  • Display.LIST_ITEM

FontSize

You can pass in a pixel or percent value to FontSize or use one of the available FontSize constants.

Here are the available options:

  • FontSize(25.0) Value is in pixels.
  • FontSize.percent(50) Value is a percent of the parent font size (50%).
  • FontSize.xxSmall
  • FontSize.xSmall
  • FontSize.small
  • FontSize.medium This is the default value for FontSize
  • FontSize.large
  • FontSize.xLarge
  • FontSize.xxLarge
  • FontSize.smaller (83% of the parent font size)
  • FontSize.larger (120% of the parent font size)

ListStyleType

This is used on ol or ul when deciding what type of list item indicator to use. There are currently two available options:

  • ListStyleType.DISC
  • ListStyleType.DECIMAL

VerticalAlign

There are three available options for VerticalAlign:

  • VerticalAlign.BASELINE The default
  • VerticalAlign.SUB (Subscript baseline)
  • VerticalAlign.SUPER (Superscript baseline)

WhiteSpace

You can choose whether or not to preserve whitespace in a given element. There are two available options:

  • WhiteSpace.NORMAL Default
  • WhiteSpace.PRE Preserves all whitespace in element and its children.

Inherited Attributes

CSS, as its name implies, cascades its styles down to its children. This package replicates that behavior and the following attributes are inherited by children from their parents, which means that if you set any of these attributes on an element, all children elements will have that option applied as well.

The following attributes are inherited:

  • color
  • fontFamily
  • fontSize
  • fontStyle
  • fontWeight
  • listStyleType
  • whiteSpace
Clone this wiki locally