duck 1.0.2

Dynamic UI Component Kit is for creating dynamically updatable UI components with Over-The-Air (OTA) updates and skip app store approval.

example/example.md

Creating Custom Components

You can create your own components by extending DuckComponent. Here's an example of a horizontal container component:

import 'package:duck/core/duck_component/duck_component.dart';
import 'package:duck/core/duck_component/duck_component_list_converter.dart';
import 'package:duckrunner/components/horizontal_container/horizontal_container_widget.dart';
import 'package:flutter/widgets.dart';
import 'package:json_annotation/json_annotation.dart';

part 'horizontal_container_data.g.dart';

@JsonSerializable()
class HorizontalContainerData extends DuckComponent {
  static const String componentType = 'horizontalContainer';

  @override
  String get type => componentType;

  @DuckComponentListConverter()
  final List<DuckComponent> list;

  HorizontalContainerData({required this.list});

  @override
  Widget buildWidget(BuildContext context) {
    return HorizontalContainerWidget(
      data: HorizontalContainerWidgetData.fromComponent(this),
    );
  }

  factory HorizontalContainerData.fromJson(Map<String, dynamic> json) =>
      _$HorizontalContainerDataFromJson(json);

  @override
  Map<String, dynamic> toJson() => _$HorizontalContainerDataToJson(this);

  factory HorizontalContainerData.mock() {
    return HorizontalContainerData(list: []);
  }
}

Then create the widget implementation:

import 'package:duck/core/duck_component/duck_component.dart';
import 'package:duckrunner/components/horizontal_container/horizontal_container_data.dart';
import 'package:flutter/material.dart';

class HorizontalContainerWidgetData {
  final List<DuckComponent> list;

  HorizontalContainerWidgetData({required this.list});

  factory HorizontalContainerWidgetData.fromComponent(
    HorizontalContainerData component,
  ) {
    return HorizontalContainerWidgetData(list: component.list);
  }
}

class HorizontalContainerWidget extends StatelessWidget {
  const HorizontalContainerWidget({super.key, required this.data});

  final HorizontalContainerWidgetData data;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: data.list
            .map((component) => component.buildWidget(context))
            .toList(),
      ),
    );
  }
}

Finally, don't forget to register your custom component in main.dart:

Duck(
  baseUrl: baseUrl,
  components: {
    HorizontalContainerData.componentType: HorizontalContainerData.fromJson,
  },
);