Skip to content

Commit 51a341d

Browse files
committed
Atualiza CHANGELOG e README para incluir o widget DivText e suas funcionalidades, além de atualizar a versão do pacote para 2.1.0
1 parent 0f19af5 commit 51a341d

3 files changed

Lines changed: 117 additions & 1 deletion

File tree

CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
## 2.1.0
2+
3+
* Adiciona `DivText` — widget de texto que herda estilo via cascata do `Div` pai
4+
* Adiciona `DivTextStyle` — classe de estilo tipográfico com `merge()` e operações de cascata
5+
* Adiciona propriedade `textStyle` no `DivStyle` para propagar estilos de texto automaticamente aos `DivText` descendentes
6+
* Adiciona formatação inline dentro de strings do `DivText`: negrito `**texto**`, itálico `*texto*`, tachado `~~texto~~`, sublinhado `__texto__` e estilos customizados `[texto]{#cor,bold,size=N}`
7+
18
## 2.0.1
29

310
* Adiciona um novo trecho na documentação do readme para melhor compreenção

README.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ Como o pacote possui a proposta de minimizar a verbosidade do `Container`, inspi
2020
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`**.
2121
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!
2222
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.
2325

2426
---
2527

@@ -175,6 +177,113 @@ Caixa(
175177

176178
---
177179

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.
185+
186+
```dart
187+
Div(
188+
style: DivStyle(
189+
padding: const EdgeInsets.all(16),
190+
color: Colors.white,
191+
textStyle: DivTextStyle(
192+
color: Colors.black87,
193+
fontSize: 15,
194+
fontFamily: 'Roboto',
195+
),
196+
),
197+
child: Column(
198+
crossAxisAlignment: CrossAxisAlignment.start,
199+
children: [
200+
DivText('Esse texto herda cor e fonte do pai.'),
201+
DivText('Esse também — sem repetir nada!'),
202+
DivText(
203+
'Esse sobrescreve só o tamanho.',
204+
style: DivTextStyle(fontSize: 22, fontWeight: FontWeight.bold),
205+
),
206+
],
207+
),
208+
);
209+
```
210+
211+
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.
212+
213+
```dart
214+
Div(
215+
style: DivStyle(
216+
textStyle: DivTextStyle(color: Colors.blue, fontSize: 16),
217+
),
218+
child: Div(
219+
style: DivStyle(
220+
textStyle: DivTextStyle(fontWeight: FontWeight.bold), // acumula
221+
),
222+
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 |
246+
| `#AARRGGBB` | `#80FF5733` | Hex com canal alfa |
247+
| `color=#RRGGBB` | `color=#1E90FF` | Cor (forma explícita) |
248+
| `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__.');
268+
269+
// Exemplo 5: dentro de um Div com cascata ativa
270+
Div(
271+
style: DivStyle(
272+
textStyle: DivTextStyle(color: Colors.black87, fontSize: 16),
273+
),
274+
child: Column(
275+
children: [
276+
DivText('Texto normal herdado do pai.'),
277+
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.
284+
285+
---
286+
178287
## Por que usar o package Caixa (`Div`)?
179288

180289
1. **Código Imensamente Mais Limpo:**

pubspec.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: caixa
22
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."
3-
version: 2.0.1
3+
version: 2.1.0
44
homepage: "https://github.com/RJ4G5/caixa"
55

66
environment:

0 commit comments

Comments
 (0)