Custom Widgets

Custom Widgets

The Custom Widgets feature is an advanced use case designed for developers who want to integrate their own pre-built Flutter components into the platform's builder.

---

1. Code Integration

If you have an existing Flutter widget, you can wrap it with our VirtualLeafStatelessWidget and implement the render method.

Example

class VWCustomCardBuilder
    extends VirtualLeafStatelessWidget<Map<String, dynamic>> {
  VWCustomCardBuilder({
    required super.props,
    required super.commonProps,
    required super.parent,
    required super.refName,
  });

  @override
  Widget render(RenderPayload payload) {
    final text = payload.eval<String>(props['titleText']);
    final style = payload.getTextStyle(props['titleTextStyle']);
    final isHighlighted = payload.eval<bool>(props['isHighlighted']) ?? false;

    Widget? imageWidget = VWImage.fromValues(
            imageSrc: props['imageSrc'] as String?,
            imageFit: props['imageFit'] as String?)
        .toWidget(payload);

    BorderRadius? borderRadius = To.borderRadius(props['borderRadius']);
    int? animationDuration = payload.eval<int>(props['animationDuration']);

    return CustomCardComponent(
      props: props,
      payload: payload,
      animationDuration: animationDuration,
      text: text,
      style: style,
      borderRadius: borderRadius,
      imageWidget: imageWidget,
      bgColor: payload.evalColor(props['bgColor']),
      isHighlighted: isHighlighted,
    );
  }
}

Once your widget class is ready, register it with a unique name:

dartCopyEditDUIFactory().registerJsonWidget(
  'custom/customCard',
  (props, childGroups) => VWCustomCardBuilder(
    props: props,
    commonProps: null,
    parent: null,
    refName: null,
  ),
);

The string custom/customCard is the widget's unique identifier. The display name you give on the dashboard gets converted to its camel case equivalent with custom prepended. eg

Custom Card -> custom/customCard

The props map will be populated with the values configured in the dashboard.

2. Dashboard Configuration

1. Create a new widget using the registered widget name.

2. Define the widget’s props, which can be:

   • String

   • Number

   • Boolean

   • JSON

   • Other supported data types

These props are passed into your widget's render method at runtime.

When the widget is used inside the app, the props are resolved via the payload object, giving you access to values, styles, colors, and other runtime data.

---

3. Workflow Summary

1. Write your Flutter widget and wrap it in VirtualLeafStatelessWidget.

2. Register it with:

   DUIFactory().registerJsonWidget(...);

3. Configure and use it from the dashboard.

4. Preview it only in your live host app (see note below).

5. See it in action with server-driven configuration.

---

⚠️ Important Note

Custom Widgets cannot be previewed in the dashboard preview or Digia preview. They can only be tested and viewed in the live host app.

---

This approach allows you to seamlessly integrate custom Flutter logic into the low-code environment while still benefiting from server-driven configuration.