Avala Design
Flutter · Dart · Material 3 · golden_toolkit · widgetbook

avala_design

First-class native Flutter kit. Every component has a Widgetbook story and a golden test in both g100 + g10 tones. Carbon's Flutter port (flutter_carbon) is community-maintained and inactive; ours is actively developed.

Install

pubspec.yamlyaml
dependencies:
  flutter:
    sdk: flutter
  avala_design: ^0.1.0

Theme

Build a ThemeData via AvalaTheme.dark() / AvalaTheme.light(). Both expose brand + optional density parameters.

lib/main.dartdart
import 'package:flutter/material.dart';
import 'package:avala_design/avala_design.dart';

void main() => runApp(const AvalaApp());

class AvalaApp extends StatelessWidget {
  const AvalaApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: AvalaTheme.light(brand: AvalaBrand.avala),
      darkTheme: AvalaTheme.dark(brand: AvalaBrand.avala),
      themeMode: ThemeMode.dark, // most Avala apps default to dark
      home: const Scaffold(
        body: Center(child: Text('Hello, Avala.')),
      ),
    );
  }
}

Tokens (per-tone)

Static const Color values per (brand × tone), generated from the same Style Dictionary source as the web kit's CSS. For tone-aware widgets, read AvalaTokens.of(context).background instead of the per-tone class directly.

example.dartdart
// Tone-aware (preferred for new code):
final tokens = AvalaTokens.of(context);
Container(color: tokens.background)

// Locked to one tone (for inverse / dark-only chrome):
Container(color: AvalaG100Tokens.background)

Widgetbook

Every primitive + pattern + domain component has a Widgetbook story. Run locally: cd design/flutter && fvm flutter run -t widgetbook/main.dart.

Goldens

Every component has a golden in test/components/ for both tones. The kit's flutter_test_config.dart installs a 3% tolerance comparator so cross-platform AA diffs don't break CI.

bash
# Run golden tests
fvm flutter test

# Update goldens (intentional change)
fvm flutter test --update-goldens

# Strict 0% comparison for a session
AVALA_DESIGN_STRICT_GOLDENS=1 fvm flutter test

What's next