json_dynamic_widget_for_shad #

A json_dynamic_widget plugin for shadcn_ui Flutter components.

This package allows you to render shadcn_ui widgets from JSON definitions, enabling dynamic UI generation for Flutter applications using the beautiful shadcn/ui design system.

Features #

• 37+ widget builders covering all major shadcn_ui components
• Full JSON serialization/deserialization support
• Compatible with json_dynamic_widget's registry system
• Type-safe argument handling with custom decoders/encoders
• Wrapper pattern for compound widgets (no manual .g.dart edits needed)

Installation #

Add to your pubspec.yaml:

dependencies:
  json_dynamic_widget: ^12.0.0+3
  json_dynamic_widget_for_shad:
    git:
      url: https://github.com/your-repo/json_dynamic_widget_for_shad.git
  shadcn_ui: ^0.x.x

Usage #

Register the plugin #

import 'package:json_dynamic_widget/json_dynamic_widget.dart';
import 'package:json_dynamic_widget_for_shad/json_dynamic_widget_for_shad.dart';

void main() {
  final registry = JsonWidgetRegistry.instance;
  
  // Register all shadcn_ui builders
  JsonShadcnPluginRegistrar.registerDefaults(registry: registry);
  
  runApp(MyApp());
}

Render widgets from JSON #

final json = {
  'type': 'shad_button_widget',
  'args': {
    'child': {
      'type': 'text',
      'args': {'text': 'Click Me'},
    },
  },
};

final data = JsonWidgetData.fromDynamic(json, registry: registry);
final widget = data.build(context: context);

Important: All properties including child must be inside the args block.

Widget Mapping Table #

shadcn_ui v0.43.0 → json_dynamic_widget_for_shad #

Child/Helper Builders #

✅ = Working with example

JSON Schema Examples #

Button with variants #

{
  "type": "shad_button_widget",
  "args": {
    "variant": "destructive",
    "child": {
      "type": "text",
      "args": {"text": "Delete"}
    }
  }
}

Card with title and description #

{
  "type": "shad_card",
  "args": {
    "title": {"type": "text", "args": {"text": "Card Title"}},
    "description": {"type": "text", "args": {"text": "Card description"}},
    "child": {
      "type": "text",
      "args": {"text": "Card content"}
    }
  }
}

Input field #

{
  "type": "shad_input",
  "args": {
    "initialValue": "",
    "placeholder": "Enter your email..."
  }
}

Tabs with content #

{
  "type": "shad_tabs_widget",
  "args": {
    "value": "tab1",
    "tabs": [
      {
        "type": "shad_tab_widget",
        "args": {
          "value": "tab1",
          "text": {"type": "text", "args": {"text": "Tab 1"}},
          "content": {"type": "text", "args": {"text": "Content 1"}}
        }
      },
      {
        "type": "shad_tab_widget",
        "args": {
          "value": "tab2",
          "text": {"type": "text", "args": {"text": "Tab 2"}},
          "content": {"type": "text", "args": {"text": "Content 2"}}
        }
      }
    ]
  }
}

Example App #

The example/ directory contains a full demo app with:

• Interactive JSON editor for each widget
• Live preview of rendered widgets
• All 33 widget examples organized by category

Run the example:

cd example
flutter run -d chrome

Important Notes #

Overlay Widgets (Sheet, Dialog, Toast) #

These widgets require imperative show functions and cannot be built directly in the widget tree:

// Build the widget from JSON
final widget = data.build(context: context);

// Then show it imperatively
showShadSheet(context: context, builder: (ctx) => widget);
showShadDialog(context: context, builder: (ctx) => widget);
ShadToaster.of(context).show(widget as ShadToast);

Table Widget #

ShadTable requires bounded height constraints:

{
  "type": "sized_box",
  "args": {
    "height": 300,
    "child": {
      "type": "shad_table_widget",
      "args": { ... }
    }
  }
}

Development #

Building after code changes #

After modifying builder source files, use the combined build script to regenerate code with fixes applied:

dart run tool/build.dart

This runs build_runner and then applies necessary fixes to the generated code.

Dependencies #

• json_dynamic_widget: ^12.0.0+3
• json_theme: ^11.0.0
• flutter_animate: ^4.5.2
• shadcn_ui (local or published version)

Acknowledgments #

This package was developed with the assistance of AI (GitHub Copilot with Claude).

License #

MIT License - see LICENSE for details.