No Material, no Cupertino. 135 components that
restyle themselves along three global axes and wear an entire brand
from a single hex seed — offline, on the first
flutter run.
Every promise below is enforced by a test that runs on every commit — not stated in a README and forgotten.
lib/src imports neither material.dart
nor cupertino.dart. 25 architecture suites sweep the
code on every test run, and the allow-list has one entry. The box,
the ripple and the scaffold belong to the system.
One value in the theme restyles all 135 components at once:
AppStyle (filled · outlined · elevated),
AppRadiusMode for every corner, and a glass axis for
floating surfaces.
The whole palette — 11 stops per role, light and dark — comes out of a seed, derived by HCT tone: perceptually uniform, with consistent contrast between stops. A brand is an object, not a fork.
The core embeds only the contract. flocks_phosphor
brings 1,512 icons × 6 weights, font-based and tree-shakeable;
flocks_lucide and flocks_cupertino cover
Lucide and the iOS vocabulary; flocks_material is the
reference adapter; your own CDN fits the same interface.
Every registered brand's contrast is verified against WCAG AA, brand × brightness, in a test. Motion honors the OS's reduce-motion setting, and no tappable target is mute to a screen reader.
Every catalog entry carries its prose in English and Brazilian
Portuguese. LocalizedText has no single-language
constructor, so a component cannot enter the catalog
half-translated.
This is the whole setup. The icons, the
illustrations and the fonts ship inside the package, so it runs on the
first 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(),
),
],
),
),
),
);The Overlay there is required, not
decoration: the dropdowns, AppTooltip,
AppPopover and the anchored pickers insert into it, and the
package mounts none for you. After that, every component reads the theme
by itself — a button is AppButton(icon: AppIconToken.add, label:
'New vehicle', onPressed: _create), and the brand, the style
axis and the radius mode are already in it.
dependencies:
flocks: ^0.1.0