Skip to content
Design Builder Flutter

Design Builder Flutter

Transform JSON token files into type-safe Flutter theme code with support for light/dark modes and runtime overrides.
Get Started View on GitHub

Features

Section titled “Features”

W3C Design Tokens Format

Uses standard W3C Design Tokens JSON format for maximum compatibility.

Light/Dark Mode

Built-in support for multiple theme modes with automatic switching.

Variable Injection

Define reusable variables and reference them with $variable.path syntax.

Typography Support

Full text style tokens with fontSize, fontWeight, letterSpacing, and more.

Runtime Overrides

Apply server-side token overrides for dynamic theming scenarios.

Lightning Fast Lookups

Instant theme access via compile-time const maps.

Quick Start

Section titled “Quick Start”
Terminal window
# Add dependency
dart pub add design_builder --dev


# Create your token files
echo '{"light": {"color": {"primary": {"$type": "color", "$value": "#1A1A2E"}}}}' > lib/tokens.json


# Generate code
dart run build_runner build

Installation Guide

Getting Started - Learn how to install and set up Design Builder in your Flutter project.