flutter_ui_kit Free

A comprehensive Flutter UI kit brick that generates a customizable design system package with foundations (colors, typography, spacing, radius, shadows), theme extensions, atomic components, and a Widgetbook showcase app.

Version: 1.0.0

Variables

Variable	Type	Default	Description
appName	string	MyApp	Application name for package naming
prefix	string	App	Customizable UI kit prefix (e.g., App, Aloha, Gopay)
prefixCasing	enum (upperCase, pascalCase)	pascalCase	Casing style for the prefix in component names
isForMonorepo	boolean	true	Whether this UI Kit will be part of a monorepo structure
includeGenerated	boolean	false	Whether to include generated files in version control

Usage

Interactive

archipelago generate flutter_ui_kit

Non-interactive (CI)

archipelago generate flutter_ui_kit --config my_config.json

Config Template

{
  "@appName": "Application name for package naming",
  "appName": "MyApp",
  "@prefix": "Customizable UI kit prefix (e.g., App, Aloha, Gopay)",
  "prefix": "App",
  "@prefixCasing": "Casing style for the prefix in component names (upperCase | pascalCase)",
  "prefixCasing": "pascalCase",
  "@isForMonorepo": "Whether this UI Kit will be part of a monorepo structure",
  "isForMonorepo": true,
  "@includeGenerated": "Whether to include generated files in version control",
  "includeGenerated": false
}

Generated Structure

apps/
└── app_widgetbook/
    ├── lib/
    │   └── main.dart                      # Widgetbook showcase app
    └── pubspec.yaml
packages/
└── {app_name}_ui_kit/
    ├── lib/
    │   ├── {app_name}_ui_kit.dart
    │   └── src/
    │       ├── components/
    │       │   ├── components.dart
    │       │   ├── atoms/
    │       │   │   ├── atoms.dart
    │       │   │   ├── animations/
    │       │   │   ├── assets/
    │       │   │   ├── buttons/
    │       │   │   ├── cards/
    │       │   │   ├── display/
    │       │   │   ├── icons/
    │       │   │   └── inputs/
    │       │   ├── molecules/
    │       │   ├── organisms/
    │       │   ├── templates/
    │       │   └── utilities/
    │       ├── extensions/
    │       │   ├── extensions.dart
    │       │   └── build_context_extensions.dart
    │       ├── foundations/
    │       │   ├── foundations.dart
    │       │   ├── colors/
    │       │   │   ├── colors.dart
    │       │   │   ├── {prefix}_color_foundation.dart
    │       │   │   ├── {prefix}_color_token.dart
    │       │   │   └── nested/
    │       │   │       ├── nested.dart
    │       │   │       ├── {prefix}_action_colors.dart
    │       │   │       ├── {prefix}_background_colors.dart
    │       │   │       ├── {prefix}_foreground_colors.dart
    │       │   │       └── {prefix}_outline_colors.dart
    │       │   ├── typography/
    │       │   │   ├── typography.dart
    │       │   │   ├── {prefix}_font_family.dart
    │       │   │   ├── {prefix}_typography_foundation.dart
    │       │   │   └── {prefix}_typography_token.dart
    │       │   ├── spacing/
    │       │   │   ├── spacing.dart
    │       │   │   ├── {prefix}_spacing_foundation.dart
    │       │   │   └── {prefix}_spacing_token.dart
    │       │   ├── radius/
    │       │   │   ├── radius.dart
    │       │   │   └── {prefix}_radius_token.dart
    │       │   ├── shadows/
    │       │   │   ├── shadows.dart
    │       │   │   ├── {prefix}_shadow_foundation.dart
    │       │   │   └── {prefix}_shadow_token.dart
    │       │   └── themes/
    │       │       ├── themes.dart
    │       │       ├── {prefix}_theme.dart
    │       │       └── extensions/
    │       │           ├── extensions.dart
    │       │           ├── {prefix}_asset_extension.dart
    │       │           ├── {prefix}_color_extension.dart
    │       │           ├── {prefix}_radius_extension.dart
    │       │           ├── {prefix}_shadow_extension.dart
    │       │           ├── {prefix}_spacing_extension.dart
    │       │           └── {prefix}_typography_extension.dart
    │       ├── initializers/
    │       │   ├── initializers.dart
    │       │   ├── {prefix}_asset_preload_initializer.dart
    │       │   ├── {prefix}_font_initializer.dart
    │       │   └── {prefix}_ui_kit_initializer.dart
    │       └── utilities/
    │           ├── utilities.dart
    │           ├── asset_precacher.dart
    │           ├── debouncer.dart
    │           └── lottie_cache.dart
    ├── test/
    │   ├── flutter_test_config.dart
    │   ├── foundations/
    │   │   ├── colors/
    │   │   │   └── color_golden_test.dart
    │   │   ├── radius/
    │   │   │   └── radius_golden_test.dart
    │   │   ├── spacing/
    │   │   │   └── spacing_golden_test.dart
    │   │   └── typography/
    │   │       └── typography_golden_test.dart
    │   └── util/
    │       ├── app_test_wrapper.dart
    │       └── color_swatch_widget.dart
    ├── analysis_options.yaml
    └── pubspec.yaml