Adding custom widgets

Pre-Requirements

Install duit_kernel - a core library that contains the interfaces that will need to be implemented to connect the custom widget

flutter pub add duit_kernel

DuitRegistry

Adding custom widgets is done using the DUITRegistry class. This class implements a number of methods, but only one can be used correctly on the client side - register.

static void register(
    String key,
    ModelMapper modelMapper,
    Renderer renderer,
    AttributesMapper attributesMapper,
)

This method takes several parameters:

• key - string key by which the widget model received from the backend and other entities will be associated.
• modelMapper - a method used to transfer a number of values ​​to the custom widget model (see example below).
• renderer - a method that takes as input to a widget model and returns a Flutter widget, assigning the passed properties to the Flutter widget properties.
• attributesMapper - a method that converts JSON representing the properties of a Flutter widget into a Dart object, which can later be used during rendering (see example below).

Calling the register method with these parameters will register the new widget and allow it to be automatically inserted into the widget hierarchy when it appears in the layout model.

Example

1. Custom Duit widget implementation

import 'package:flutter/material.dart';
import 'package:flutter_duit/flutter_duit.dart';

//Define custom widget model ExampleCustomWidget by extending from DUITElement
final class ExampleCustomWidget<T> extends DUITElement<T> {
  @override
  ViewAttributeWrapper<T>? attributes;

  @override
  UIElementController<T>? viewController;

  ExampleCustomWidget({
    required super.id,
    required this.attributes,
    required this.viewController,
    required super.controlled,
  }) : super(
          type: DUITElementType.custom,
          tag: "ExampleCustomWidget",
        );
}

//Define custom attributes ExampleCustomWidgetAttributes and implements DUITAttributes interface
class ExampleCustomWidgetAttributes
    implements DUITAttributes<ExampleCustomWidgetAttributes> {
  String? random;

  ExampleCustomWidgetAttributes({required this.random});

  @override
  ExampleCustomWidgetAttributes copyWith(other) {
    return ExampleCustomWidgetAttributes(
      random: other.random ?? random,
    );
  }
}

//Implement attribute mapper
DUITAttributes exampleAttributeMapper(String type, Map<String, dynamic>? json) {
  return ExampleCustomWidgetAttributes(random: json?["random"] ?? "no random");
}

//Implement renderer
Widget exampleRenderer(DUITElement model) {
  final data = model.attributes?.payload as ExampleCustomWidgetAttributes?;
  return Text(data?.random ?? "no random");
}

//Implement model mapper
DUITElement modelMapperExample(
  String id,
  bool controlled,
  ViewAttributeWrapper attributes,
  UIElementController? controller,
) {
  return ExampleCustomWidget(
    id: id,
    attributes: attributes,
    viewController: controller,
    controlled: controlled,
  );
}

2. Register custom widget

DUITRegistry.register(
    "ExampleCustomWidget",
    modelMapperExample,
    exampleRenderer,
    exampleAttributeMapper,
  );