Kontakt

Visuelle Konsistenz auf Knopfdruck: Der Design System Generator für Flutter

Minimalistische Illustration eines lächelnden Rechtecks auf einem blauen Block, mit drei blauen Blöcken in der Nähe auf einem hellblauen Hintergrund.

Design Systems sind das Rückgrat konsistenter User Interfaces. Sie definieren Farben, Typografie, Abstände und mehr – und sorgen dafür, dass deine App nicht nur gut aussieht, sondern auch wartbar bleibt. Doch wie integrierst du ein Design System effizient in Flutter? Mit unserem Open-Source-Tool Design System Generator wird das zum Kinderspiel.

Warum ein Design System Generator?

In Flutter-Projekten manuell Design-Tokens zu pflegen, ist fehleranfällig und zeitaufwendig. Unser Generator automatisiert diesen Prozess und bietet darüber hinaus zahlreiche Vorteile:​

  • Konsistenz & Qualität sichern
    Alle Design-Tokens werden zentral definiert und automatisch in Dart-Code übersetzt. Das gewährleistet eine einheitliche visuelle Sprache über alle Komponenten hinweg und reduziert Inkonsistenzen. ​Magic Numbers gehören der Vergangenheit an: Statt harte Werte wie 16.0 oder #FF0000 im Code zu verwenden, greifst du auf klar benannte Konstanten wie AppSpatials.s16 oder AppColors.primary zurück.
  • Typsicherheit & Autovervollständigung
    Dank generiertem Code profitierst du von Autovervollständigung und Compiler-Checks. Dies minimiert Fehler und beschleunigt die Entwicklung.​
  • Effizienz durch Automatisierung
    Durch die Automatisierung der Code-Generierung aus einer JSON-Konfiguration sparst du wertvolle Entwicklungszeit. Änderungen am Design System erfordern nur eine Anpassung der Konfiguration, was den Wartungsaufwand erheblich reduziert. Zusätzlich werden hilfreiche Funktionen wie responsive Breakpoint-Helper generiert, die die Entwicklung weiter vereinfachen.​
  • Skalierbarkeit & Flexibilität
    Der Generator unterstützt mehrere Design Systems pro Projekt. Dies ermöglicht eine einfache Skalierung und Anpassung an unterschiedliche Anforderungen oder Markenidentitäten.​
  • Zentrale Dokumentation & Zusammenarbeit
    Die JSON-Konfiguration dient als „Single Source of Truth“ für dein Design System. Dies erleichtert die Zusammenarbeit zwischen Design- und Entwicklungsteams und stellt sicher, dass alle auf dem gleichen Stand sind. ​

Was wird generiert?

Basierend auf einer JSON-Konfiguration erstellt der Generator:​

  • 🎨 Farben​
  • 📏 Abstände (Spacings)​
  • 🟦 Border-Radien und -Breiten​
  • 📱 Breakpoints​
  • 🖋️ Typografie (TextStyles)​
  • 🖼️ Icon-Grössen​

Zusätzlich werden diverse Helper-Funktionen generiert, die dir die Arbeit mit den Tokens erleichtert.​

So funktioniert's

Installation

Füge die benötigten Pakete als Dev-Dependencies hinzu:

flutter pub add dev:design_system_generator dev:build_runner

Konfiguration

Erstelle eine Datei mit der Endung .design-system.json in deinem lib-Verzeichnis. Ein Beispiel:

{
  "$schema": "https://github.com/smartive/flutter-design-system-generator/blob/main/design-system.schema.json",
  "colors": {
    "transparent": "#00000000",
    "black": "#000000",
    "white": "#FFFFFF",
    "neutral": {
      "100": {
        "DEFAULT": "#F5F5F5",
        "contrast": "#333"
      }
    },
    "blue": {
      "DEFAULT": "#155DFC",
      "100": "#DBEAFE",
      "200": "#162456"
    }
  },
  "spacings": {
    "s10": 10,
    "s20": 20,
    "s30": 30
  },
  "borderWidths": {
    "b1": 1,
    "b2": 2
  },
  "borderRadius": {
    "normal": 8,
    "full": 9999
  },
  "screens": {
    "compact": 600,
    "medium": 840,
    "expanded": 1200
  },
  "typography": {
    "text": {
      "md": {
        "DEFAULT": {
          "family": "Inter",
          "weight": 400,
          "size": 12,
          "lineHeight": 16
        },
        "semibold": {
          "family": "Inter",
          "weight": 600,
          "size": 12,
          "lineHeight": 16
        }
      }
    },
    "display": {
      "lg": {
        "DEFAULT": {
          "family": "Arial",
          "weight": 400,
          "size": 28,
          "lineHeight": 36
        },
        "semibold": {
          "family": "Arial",
          "weight": 600,
          "size": 28,
          "lineHeight": 36
        }
      }
    }
  },
  "iconSizes": {
    "sm": 16,
    "md": 24,
    "lg": 32
  }
}

Tipp: Orientier dich bei der Strukturierung deiner Design-Tokens an etablierten Design Systems wie Tailwind CSS. Tailwind nutzt beispielsweise ein konsistentes Namensschema für Farben (primary, secondary), Abstände (sm, md, lg) und Typografie (text-sm, text-lg), das sich auch in deinem JSON-Setup widerspiegeln kann. Dies fördert die Wiederverwendbarkeit und erleichtert die Zusammenarbeit zwischen Design- und Entwicklungsteams.​

Optional kannst du auch ein eigenes JSON-Schema definieren und in deiner .design-system.json-Datei referenzieren, um spezifische Anforderungen deines Projekts abzubilden.

Generierung

Führe den Build-Runner aus, um den Dart-Code zu generieren:

dart run build_runner build --delete-conflicting-outputs

Der generierte Code steht dir nun zur Verfügung und kann direkt in deinem Projekt verwendet werden.

Denk daran, die erzeugten Files ins .gitignore einzutragen – der Inhalt wird bei jedem Build-Prozess frisch erzeugt.

Verwendung

Nach der erfolgreichen Generierung deines Design Systems stehen dir die definierten Tokens als typsichere Dart-Klassen zur Verfügung.

🎨 Farben

Verwende die generierten Farbwerte aus der AppColors-Klasse:​

Container(
  color: AppColors.blue,
);

Für Varianten wie contrast kannst du ebenfalls auf die entsprechenden Properties zugreifen:

 Container(
  color: AppColors.neutral100Contrast,
);

📏 Abstände (Spacings)

Nutze die definierten Abstände aus der AppSpatials-Klasse:​

SizedBox(height: AppSpatials.s10, width: AppSpatials.s20);

Oder nutze Helper-Funktionen aus dem AppSpatial-Enum, um Paddings bzw. Spacer zu definieren:​

Padding(
  padding: AppSpatial.s10.insetsAll,
  child: Text('Beispieltext'),
);
Column(
  children: [
    Text('Beispieltext 1'),
    AppSpatial.s30.verticalSpacer,
    Text('Beispieltext 2'),
  ]
);

🟦 Border-Radien und -Breiten

Verwende die definierten Border-Radien und -Breiten aus den entsprechenden Klassen oder lasse direkt mit der Klasse AppBorders typisierte Rahmen erstellen:​

Container(
  decoration: BoxDecoration(
    borderRadius: AppBorderRadius.normal.all,
    border: AppBorders.all(AppBorderWidth.b1),
    // weitere BoxDecoration Eigenschaften
  ),
);

📱 Responsive Breakpoints

Nutze die generierten Breakpoints aus der AppBreakpoints-Klasse, um dein Layout responsiv zu gestalten:​

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth >= AppBreakpoints.expanded) {
      return DesktopLayout();
    } else if (constraints.maxWidth >= AppBreakpoints.medium) {
      return TabletLayout();
    } else {
      return MobileLayout();
    }
  },
);

🖋️ Typografie

Setze die generierten TextStyles aus der AppTypographies-Klasse ein:​

Text(
  'Überschrift',
  style: AppTypographies.displayLgSemibold,
);

🖼️ Icon-Grössen

Setze die generierten Icon-Grössen aus der AppIconSizes-Klasse ein:​

Icon(
  Icons.star,
  size: AppIconSizes.md,
);

Fazit

Der Design System Generator spart Zeit, reduziert Fehler und sorgt für ein konsistentes Erscheinungsbild deiner Flutter-App. Ob kleines Projekt oder umfangreiche Anwendung – mit diesem Tool bringst du dein Design System effizient in den Code.​ Falls du Fragen zur Nutzung hast oder Anregungen zur Weiterentwicklung, freuen wir uns über dein Feedback.

👉 Hier geht's zum Repository

Geschrieben von
Nando Schär

App-Entwicklung|Mai 2025

Weitere Artikel