ui/ui library
Kit de UI do Flenx — componentes em Dart, estilo Flutter (FlenxColumn, FlenxText, FlenxButton, FlenxHero...). Você passa só valores Dart (cor, espaçamento, texto); a lib gera o HTML/CSS. Não precisa saber HTML/CSS.
Classes
- FlenxAccordion
- Lista acordeão — itens expansíveis com animação suave (CSS puro, sem JS).
- FlenxAccordionItem
- Um item do FlenxAccordion: título clicável + conteúdo expansível.
- FlenxAlert
- Caixa de alerta com ícone, título opcional e mensagem. Use para validações, avisos e confirmações — sem escrever HTML/CSS.
- FlenxAnimated
- Envolve qualquer componente com uma animação — scroll-reveal ou loop.
- FlenxAudioPlayer
- Player de áudio — reproduz arquivos locais ou streams (rádio online). Play/pause controlado por JS; sem bibliotecas externas.
- FlenxAudioPlayerFloat
- Player de áudio flutuante — barra fixa no bottom da tela, persiste durante o scroll. Ideal para rádio online ou trilha sonora do site.
- FlenxBanner
- Barra de anúncio no topo da página — promoções, avisos de manutenção, novidades. Exibe message e um action opcional. Sem HTML/CSS.
- FlenxBenefit
- Um benefício exibido na faixa acima do rodapé.
- FlenxBenefitsBar
- Faixa de benefícios (frete, parcelamento, troca...) acima do rodapé.
- FlenxBrandItem
- Um item da tira de marcas/departamentos.
- FlenxBrandStrip
- Tira de marcas/departamentos com botão "Confira".
- FlenxButton
-
Botão/link — como um
ElevatedButton/TextButton. Aponta para href. Tem hover predefinido (clareia + sobe levemente) ativado por padrão; é só um parâmetro Dart (hover) — você nunca escreve CSS. O componente injeta o:hoverscoped por baixo (inline não faz:hover). - FlenxCard
-
Cartão — um contêiner com fundo, borda e cantos arredondados (como um
Card/Containerdo Flutter). Estilo por parâmetros; nada de CSS. - FlenxChecklist
- Lista densa de itens com marcador — para apresentar MUITOS recursos, diferenciais ou dores sem virar um grid de cards genérico. Marcador de "check" (positivo) ou "×" (negativo, ex.: seção "o desafio").
- FlenxChecklistItem
- Item de uma FlenxChecklist: título e (opcional) descrição curta.
- FlenxCodeCard
- Cartão de código (estilo "janela de editor") — você passa só o texto do código; o componente desenha a janela. Nada de HTML/CSS da sua parte.
- FlenxColumn
-
Coluna (vertical) — como o
Columndo Flutter. gap é o espaço entre os filhos (px). Gera flexbox por baixo; você não escreve CSS. - FlenxCompare
- Tabela comparativa "nós x eles" — quebra a objeção de preço/valor mostrando, de forma escaneável, o que muda entre a sua marca e a alternativa comum. Componente só-Dart (o CSS fica encapsulado aqui, sem HTML/CSS no site).
- FlenxCompareRow
- Linha de um FlenxCompare: o recurso e se cada lado o oferece.
- FlenxCta
- Chamada para ação (CTA): título, subtítulo e um botão, num cartão centrado.
- FlenxFaq
-
Seção de FAQ visível (AEO) — perguntas/respostas em
<details>nativo, sem JS. Reusa o model FaqItem. Para o rich result FAQPage, passe os MESMOS itens emRouteMeta.faqs(o schema é emitido no<head>pela lib). - FlenxFeatureSpotlight
- Seção "spotlight": um texto (eyebrow + título + descrição + bullets) ao lado de uma imagem/screenshot com moldura. Alterna o lado com imageLeft. Responsivo: em telas estreitas vira uma coluna (imagem embaixo).
- Rodapé pronto: marca + frase + colunas de links + linha de copyright. Tudo por parâmetros (Dart); o componente desenha o HTML por baixo.
- Uma coluna de links do rodapé.
- FlenxFormField
- Campo de um FlenxLeadForm.
- FlenxFullscreen
- Contêiner que ocupa a tela inteira (100% × 100vh, sem margem) — usado para hospedar uma ilha Flutter em tela cheia (ex.: o painel admin).
- FlenxGrid
-
Grade responsiva — coloca os filhos lado a lado e quebra a linha sozinha
quando a tela estreita (cada item tem largura mínima minItemWidth).
Substitui aqueles
div(flex: ...)na mão: você só passa os componentes. - FlenxHeading
-
Título — como um
Textde destaque. level 1–3 vira<h1>..<h3>(bom para SEO); o tamanho default segue o nível, mas pode ser sobrescrito com size. - FlenxHero
- Hero pronto da landing: olho (eyebrow), título, subtítulo, botões (actions) e um conteúdo opcional à direita (aside, ex.: FlenxCodeCard). Tudo por parâmetros — você não escreve HTML/CSS.
- FlenxHeroBanner
- Banner principal (hero) da loja — eyebrow, título, subtítulo, preço de chamada e botão. Setas e indicadores são decorativos.
- FlenxHeroCarousel
- Hero em carrossel: vários slides com imagem de fundo que trocam automaticamente (fade), com indicadores. Cada slide tem eyebrow, título, subtítulo, preço de chamada e botão. Só Dart — o HTML/JS fica aqui na lib.
- FlenxHeroCover
- Hero de tela cheia com imagem de fundo (com zoom Ken Burns), logo opcional flutuando acima do título e conteúdo com animação de entrada. Só Dart — o CSS/keyframes vão embutidos no próprio componente.
- FlenxHeroSlide
- Um slide do hero/carrossel da loja.
- FlenxHeroSplit
- Hero em duas colunas: texto à esquerda, imagem à direita. No mobile a imagem se converte em fundo desfocado atrás do texto.
- FlenxImage
-
Imagem — como o
Imagedo Flutter. src é a URL/caminho. Estilo por parâmetros; nada de CSS. - FlenxInsets
-
Espaçamento (padding/margin) no estilo
EdgeInsetsdo Flutter, mas puro-Dart — não depende dedart:ui(que não roda na geração estática). - FlenxLeadForm
- Formulário de captura de leads configurável, só-Dart (o CSS/JS fica encapsulado aqui — nada de HTML no site). Envia por mailto compondo o corpo com todos os campos (sem back-end). Renderize dentro de um hero/section.
- FlenxLottie
-
Animação Lottie — carrega um arquivo
.jsonvia lottie-web. O runtime JS é carregado do CDN automaticamente (uma vez por página). - FlenxMostRead
- Bloco "Mais lidas" (estilo G1): lista numerada com números na cor primária.
- FlenxNewsCard
- Cartão de notícia (estilo G1): thumb 16:9, chapéu (editoria) e título.
- FlenxNewsHeader
-
Cabeçalho de portal de notícias (estilo G1): barra branca fixa com logo
(duas palavras) e, abaixo, a faixa de editorias com rolagem no mobile.
A cor do logo e dos hovers vem de
var(--primary)(defina no FlenxPage). - FlenxNewsHighlight
- Manchete principal (estilo G1): imagem larga 16:9, chapéu da editoria, título grande responsivo, linha-fina e meta (autor · data).
- FlenxNewsSectionTitle
-
Título de bloco/editoria (estilo G1): texto com barra à esquerda na cor
primária (
var(--primary)). - FlenxPage
-
Raiz de uma página do site — agrupa os blocos (header, seções, footer) e já
injeta o estilo-base do Flenx por baixo. Use no lugar daquele
div(classes: 'flenx-site')+<style>na mão:FlenxPage([SiteHeader(...), FlenxHero(...), ...]). - FlenxPricePill
- Uma pílula de preço (ex.: "A PARTIR DE R$ 99,90").
- FlenxPricePills
- Faixa de pílulas de preço ("A PARTIR DE R$ ...").
- FlenxProductCard
- Card de produto estilo marketplace de moda: foto/ícone, selo de desconto, marca, nome, preço antigo riscado, preço, parcelas e botão comprar. Tudo por parâmetros Dart — o componente desenha o HTML por baixo.
- FlenxProductDetail
- Página de detalhe de um produto (estilo marketplace): trilha, foto grande, marca, nome, preço (antigo/atual), parcelas, selo e botões de compra + descrição. Tudo por parâmetros Dart.
- FlenxProductGrid
- Grade de produtos (catálogo) usando os mesmos cards.
- FlenxProductShelf
- Prateleira de produtos: cabeçalho colorido (com contador opcional) + carrossel horizontal de cards. Passe os cards prontos em products.
- FlenxPromo
-
Uma campanha de propaganda agendada exibida no
PromoModal. - FlenxPromoModal
-
Modal de propaganda no centro da tela, agendado por período. Passe uma lista
de
Promocom datas; o modal escolhe, no navegador, a primeira campanha ativa (dentro do período e ainda não fechada) e a exibe centralizada, com overlay, carrossel de imagens opcional, botão de fechar e ação opcional. Renderize viafloatingButtons. - FlenxRedirect
-
Página de redirecionamento (client-side) — leva o visitante a to na hora
(meta refresh +
location.replace), com um link de fallback. Ideal para links curtos/de campanha (ex.:/wpp→ WhatsApp). Só-Dart. - FlenxRive
-
Animação Rive — carrega um arquivo
.rivvia @rive-app/canvas. O runtime JS é carregado do CDN automaticamente (uma vez por página). - FlenxRow
-
Linha (horizontal) — como o
Rowdo Flutter. Com wraptrue, quebra para baixo quando a tela é estreita (responsivo automático, sem media query). - FlenxSection
- Seção da página — uma faixa com espaçamento vertical e um contêiner central de largura máxima (como um bloco de tela). Estilo por parâmetros; sem CSS.
- FlenxSidebarLayout
- Layout de duas colunas (estilo portal): conteúdo principal largo + barra lateral. Empilha sozinho no mobile (flex-wrap), sem media query.
- FlenxSpacer
-
Espaçamento vertical fixo — como o
SizedBox(height: X)do Flutter. Use dentro deFlenxColumnquando precisar de espaçamento pontual diferente dogapuniforme da coluna. - FlenxStatItem
- Um número de destaque do FlenxStats: valor grande + rótulo curto.
- FlenxStats
- Faixa de estatísticas / prova social (números que geram confiança). Só-Dart — o CSS fica encapsulado aqui. Ideal logo abaixo do hero.
- FlenxStep
- Um passo do "como funciona".
- FlenxSteps
-
Seção de passos numerados.
FlenxSteps(title: '...', steps: [FlenxStep(...)]). - FlenxStoreShell
- Raiz de uma página de loja (marketplace de moda). Injeta o CSS do kit de e-commerce e desenha o cabeçalho (logo, CEP, busca, conta/desejos/carrinho), a barra de categorias, a faixa de cupom e o rodapé. O miolo vem em children (hero, pílulas, prateleiras, grade...). O app só passa Dart.
- FlenxStyle
-
Estilo global no padrão Flutter (nomes de propriedades tipados), convertido
em CSS pela flenx. Puro-Dart (seguro na geração estática — sem
dart:ui). - FlenxSvg
-
Componente SVG — arquivo externo (via
<img>) ou inline (string SVG direto no DOM, permitindo estilização via CSS). - FlenxText
-
Texto — como o
Textdo Flutter, com estilo por parâmetros (nada de CSS). - FlenxTrustBar
-
Barra de "construído sobre / parceiros": um rótulo opcional + uma lista de
nomes em destaque. Substitui aquele bloco de
div/spanpor puro Dart:FlenxTrustBar(label: 'Construído sobre', items: ['jaspr','Flutter','Dart']).
Enums
- FlenxAlertVariant
- Variante visual do FlenxAlert.
- FlenxAlign
- Alinhamento em FlenxColumn/FlenxRow (vira flexbox por baixo).
- FlenxAnimation
- Tipos de animação disponíveis no FlenxAnimated.
- FlenxButtonVariant
- Variante visual de FlenxButton.
- FlenxCardHover
- Estilo de animação ao passar o mouse sobre um FlenxCard.
- FlenxPromoRepeat
- Frequência com que a campanha volta a aparecer após ser fechada.
- FlenxTextAlign
- Alinhamento de texto.