flocks

Um design system Flutter construído sobre widgets.dart

Sem Material, sem Cupertino. 135 componentes que se reestilizam por três eixos globais e vestem uma marca inteira a partir de uma única semente hex — offline, no primeiro flutter run.

Explore os componentes Ver no GitHub
  • 135 componentes
  • 305 exemplos vivos
  • 1.500+ testes
  • 2 idiomas

Opinado onde importa

Cada promessa abaixo é cobrada por um teste que roda em todo commit — não declarada num README e esquecida.

Arquitetura

Zero Material — e é verificado

lib/src não importa material.dart nem cupertino.dart. 25 suítes de arquitetura varrem o código em todo teste, e a allow-list tem uma entrada. A caixa, o ripple e o scaffold pertencem ao sistema.

Tema

Três eixos globais

Um valor no tema reestiliza os 135 componentes de uma vez: AppStyle (filled · outlined · elevated), AppRadiusMode para todo canto, e um eixo de glass para superfícies flutuantes.

White-label

Uma marca de um hex

A paleta inteira — 11 stops por papel, claro e escuro — sai de uma semente, derivada por tom HCT: perceptualmente uniforme, com contraste consistente entre stops. Marca é objeto, não fork.

Ícones

Provedores plugáveis

O core embarca só o contrato. O flocks_phosphor traz 1.512 ícones × 6 pesos, em fonte e tree-shakeable; o flocks_lucide e o flocks_cupertino cobrem o Lucide e o vocabulário do iOS; o flocks_material é o adaptador de referência; a sua CDN cabe na mesma interface.

Acessibilidade

Gates, não intenções

O contraste de toda marca registrada é verificado contra WCAG AA, marca × brilho, em teste. A animação honra o reduce-motion do sistema, e nenhum alvo tocável é mudo para o leitor de tela.

Docs

Bilíngue por tipo

Toda entrada do catálogo carrega sua prosa em inglês e em português. LocalizedText não tem construtor monolíngue, então um componente não entra no catálogo meio traduzido.

Uma semente, sem rede

Isso é todo o setup. Os ícones, as ilustrações e as fontes vêm dentro do pacote, então isto roda no primeiro flutter run.

import 'package:flocks/flocks.dart';
import 'package:flutter/widgets.dart';

final myBrand = AppBrandConfig(
  clientSlug: 'acme',
  primaryColor: swatchFromSeed(const Color(0xFF4F46E5)),
);

void main() => runApp(
  AppTheme(
    data: AppThemeData.forBrand(myBrand, dark: false),
    child: Directionality(
      textDirection: TextDirection.ltr,
      child: Overlay(
        initialEntries: <OverlayEntry>[
          OverlayEntry(
            builder: (BuildContext context) => const MyApp(),
          ),
        ],
      ),
    ),
  ),
);

O Overlay ali é exigido, e não decoração: os dropdowns, o AppTooltip, o AppPopover e os pickers ancorados inserem nele, e o pacote não monta nenhum por você. Depois disso, cada componente lê o tema sozinho — um botão é AppButton(icon: AppIconToken.add, label: 'Novo veículo', onPressed: _create), e a marca, o eixo de estilo e o modo de radius já estão nele.

Instalação

dependencies:
  flocks: ^0.1.0