Using External Components
Learn how to embed your own widget into Codelessly's layout.
Codelessly offers a wide range of components that can be the building blocks for most of your layouts. However, there can be times when you want to use a very specific widget that is not yet available in Codelessly or you want to use a widget from a third-party package into your codelessly layout.
To fulfill this use-case, we have a component called External Component
in the components library.
As the name implies, this component behaves like an iFrame and allows you to hook your own widget into it programmatically. You can pass this widget from CodelesslyWidget
using our Cloud UI SDK.
Any custom widget can be rendered inside this external component as long as it can respect its constraints.
Usage
Like other components, you can drag and drop this component in any of your layouts.
Provide a unique identifier for this component. This
id
will used to identify the component fromCodelesslyWidget
in the SDK to map it to a widget builder.
From the SDK side, where you are using
CodelesslyWidget
, pass your widget using theexternalComponentBuilders
constructor parameter.
Note that the
key
needs to match exactly to the unique external ID provided in the Editor.
You can have as many external components as you want. You can pass any widget including StatefulWidget
and manage its state yourself. You can provide all of them in CodelesslyWidget
by using their unique ids.
Last updated