Elementos

Os 12 tipos de elementos disponíveis para compor relatórios

Elementos#

Cada elemento é posicionado dentro de uma band por coordenadas x e y (em pontos, relativas ao canto superior esquerdo da band). Todos compartilham estas propriedades base:

Propriedade	Tipo	Padrão	Descrição
`type`	`string`	—	Tipo do elemento (discriminador)
`id`	`string`	—	Identificador único
`x`	`double`	—	Posição horizontal
`y`	`double`	—	Posição vertical (relativa à band)
`zIndex`	`int`	`0`	Ordem de empilhamento (maior = acima)

Tipos disponíveis#

Tipo	Classe Dart	Uso
`text`	`TextElement`	Texto estático com suporte a interpolação `{key}`
`field`	`FieldElement`	Binding a dados com formatação
`aggregate`	`AggregateElement`	SUM, COUNT, AVG, MAX, MIN
`image`	`ImageElement`	Imagem (base64 ou URL)
`table`	`TableElement`	Tabela com colunas e data source
`chart`	`ChartElement`	Gráfico (bar, line, pie)
`barcode`	`BarcodeElement`	Código de barras / QR Code
`line`	`LineElement`	Linha entre dois pontos (sólida ou tracejada)
`rect`	`RectElement`	Retângulo
`circle`	`CircleElement`	Círculo / elipse
`spacer`	`SpacerElement`	Espaço vazio
`richText`	`RichTextElement`	Texto com múltiplos estilos

O tipo `divider` foi unificado com `line`. JSONs antigos com `"type": "divider"` continuam sendo aceitos via alias, mas novos relatórios devem usar `line`.

Exemplo de posicionamento#

{
  "type": "header",
  "id": "hdr",
  "height": 80,
  "elements": [
    { "type": "text", "id": "title", "x": 40, "y": 20, "content": "RELATÓRIO", "fontSize": 24, "bold": true },
    { "type": "text", "id": "date", "x": 400, "y": 20, "content": "Fevereiro 2026", "fontSize": 10, "color": "666666" },
    { "type": "line", "id": "sep", "x": 40, "y": 60, "x2": 555, "y2": 60, "color": "cccccc" }
  ]
}

Os mesmos coordenadas produzem posicionamento idêntico em PDF e HTML — o Sulfite usa position:absolute no HTML para replicar o layout do PDF.