Kontakt

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

Auf einem Smartphone wird die Benutzeroberfläche einer Food-App angezeigt, während auf der linken Seite Code und Designspezifikationen erscheinen und sich in der oberen rechten Ecke das Flutter-Logo befindet.

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