You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+109Lines changed: 109 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,6 +20,8 @@ Como o pacote possui a proposta de minimizar a verbosidade do `Container`, inspi
20
20
3.**Estilos e Estados Interativos (`hoverStyle`, `pressedStyle`):** Trate de eventos de mouse (Hover em Web/Desktop) de forma nativa igual os pseudoelementos `:hover` e `:active` do CSS, tudo unificado dentro do **`DivStyle`**.
21
21
4.**Alta Performance:** A `Div` é um `StatelessWidget`. Ela só escala sua complexidade nativamente caso encontre um ouvinte `listen`, `hoverStyle` ou `pressedStyle` nela ou em seu estilo base. Ou seja, você não terá dor de cabeça com perda de performance, mesmo empilhando várias `Div` juntas!
22
22
5.**Animações Nativas:** Basta passar o parâmetro `animationDuration` e qualquer troca de estado ou estilo passará a ser animada suavemente (como o tradicional `transition: all` do CSS).
23
+
6.**`DivText` e `DivTextStyle`:** Widget de texto com herança de estilo em cascata — defina `textStyle` no `DivStyle` do pai e todos os `DivText` descendentes herdam automaticamente, podendo sobrescrever localmente.
24
+
7.**Formatação inline no `DivText`:** Destaque palavras ou trechos dentro da própria string com uma mini-linguagem inspirada no Markdown: `**negrito**`, `*itálico*`, `~~tachado~~`, `__sublinhado__` e `[texto]{#cor,bold,size=N}` para estilos totalmente customizados.
23
25
24
26
---
25
27
@@ -175,6 +177,113 @@ Caixa(
175
177
176
178
---
177
179
180
+
## DivText e DivTextStyle
181
+
182
+
### 4. Texto com estilo em cascata via `DivTextStyle`
183
+
184
+
O `DivText` é o companheiro do `Div` para texto. Basta definir um `textStyle` dentro do `DivStyle` do `Div` pai e **todos os `DivText` descendentes herdam o estilo automaticamente**, funcionando como o `color` e `font-size` em cascata do CSS.
Os estilos se **acumulam em cascata**: um `Div` dentro de outro `Div` mescla os `DivTextStyle` de todos os ancestrais, e o estilo local do `DivText` sempre vence ao final.
child: DivText('Azul, 16px e bold — herda tudo dos dois pais.'),
223
+
),
224
+
);
225
+
```
226
+
227
+
---
228
+
229
+
### 5. Formatação inline dentro das strings do `DivText`
230
+
231
+
O `DivText` suporta uma mini-linguagem de marcação inspirada no Markdown para destacar palavras ou trechos **dentro da própria string**, sem precisar montar um `RichText` manualmente.
232
+
233
+
| Sintaxe | Resultado |
234
+
|---|---|
235
+
|`**texto**`|**negrito**|
236
+
|`*texto*`|*itálico*|
237
+
|`~~texto~~`|~~tachado~~|
238
+
|`__texto__`| sublinhado |
239
+
|`[texto]{opções}`| estilo customizado |
240
+
241
+
**Opções do `[texto]{...}`** (separadas por vírgula, sem espaço entre elas):
242
+
243
+
| Opção | Exemplo | Descrição |
244
+
|---|---|---|
245
+
|`#RRGGBB`|`#FF5733`| Cor no formato hexadecimal |
|`size=N` / `fontSize=N`|`size=20`| Tamanho da fonte |
249
+
|`bold`|| Negrito |
250
+
|`italic`|| Itálico |
251
+
|`underline`|| Sublinhado |
252
+
|`strike` / `strikethrough`|| Tachado |
253
+
254
+
Os marcadores podem ser combinados livremente com o `DivTextStyle` herdado do pai — o span inline adiciona ou sobrescreve apenas as propriedades que declare:
255
+
256
+
```dart
257
+
// Exemplo 1: destaque de cor num trecho
258
+
DivText('**Lorem Ipsum** is simply [dummy text]{#FF5733} of the printing.');
259
+
260
+
// Exemplo 2: combinação de opções
261
+
DivText('[Clique aqui]{#1E90FF,bold,underline} para continuar.');
262
+
263
+
// Exemplo 3: preço em destaque
264
+
DivText('Valor: [R\$ 59,90]{#2ECC71,size=22,bold} por mês.');
265
+
266
+
// Exemplo 4: vários marcadores estilo Markdown
267
+
DivText('*Atenção:* ~~versão antiga~~ __nova versão disponível__.');
DivText('Palavra [importante]{#E74C3C,bold} no meio da frase.'),
278
+
],
279
+
),
280
+
);
281
+
```
282
+
283
+
> **Dica de segurança de caracteres:** um `*` ou `[` isolado (sem o par correspondente) é tratado como texto literal — você não precisa escapar caracteres em strings normais. Apenas o padrão completo (`**…**`, `[…]{…}`, etc.) é interpretado como marcação. Se a string não contiver nenhum marcador, o widget usa um `Text` simples sem nenhum custo extra.
Copy file name to clipboardExpand all lines: pubspec.yaml
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
name: caixa
2
2
description: "Agora o pacote Caixa é Div, crie interfaces Flutter com a agilidade usando a classe Div! Inspirado no HTML, gerencie estilos, interações (hover/click), animações e estado automático em um único widget mantendo código limpo."
0 commit comments