codelessly_sdk

Description:

codelessly sdk

Codelessly CloudUI™ SDK #


Dynamic UI and real-time updates for Flutter apps #


Supercharge your Flutter apps with dynamic UI and real-time updates. Build and publish UI without code!

Real-Time UI Updates: Adjust your UI as often as you need, all in real-time. Adapt to trends, feedback, and
business needs on the fly.
Intuitive UI Editor: Easily create and update UI with our user-friendly Codelessly Editor.
Empower Non-Technical Team Members: Enable anyone on your team to build UI without learning how to code.

Quickstart #

Step 1: Import Library
codelessly_sdk: ^latest_version
copied to clipboard
Step 2: Initialize the SDK
Initialize Codelessly before calling runApp().
void main() {
WidgetsFlutterBinding.ensureInitialized();

// Initialize SDK.
Codelessly.instance.initialize(
config: CodelesslyConfig(
authToken: AUTH_TOKEN,
isPreview: kDebugMode,
),
);

runApp(const MyApp());
}
copied to clipboard
The authTokencan be found for each project under Publish > Settings > Settings.
Step 3: Embed the CodelesslyWidget
Easily embed any design from the Codelessly Editor into your app using the layoutID.
CodelesslyWidget(
layoutID: LAYOUT_ID,
)
copied to clipboard
How to obtain a Layout ID

In the Codelessly Editor, select the canvas of your layout.
Press the Preview Icon in the toolbar.
Copy the layoutID.


Complete Example #
Here is a complete example:
import 'package:codelessly_sdk/codelessly_sdk.dart';

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Codelessly SDK Example',
home: CodelesslyWidget(
layoutID: LAYOUT_ID,
),
);
}
}
copied to clipboard
The CodelesslyWidget can be used like any other widget and embedded anywhere in your app. It can even be used to
render entire pages as the root widget!
From dynamic forms to constantly changing sales and marketing pages, any design or layout can be streamed to your app
via the CodelesslyWidget.
To learn how to use the Codelessly editor to publish layouts, check out
our 3-minute Quickstart Guide.
Injecting Data #
Customize Codelessly CloudUI™ widgets by passing data values into your layout. The UI will dynamically replace any
variables defined in the Codelessly editor with the provided values.
CodelesslyWidget(
layoutID: LAYOUT_ID,
data: {
// A map of variables, Map<String, dynamic>
},
),
copied to clipboard
Step 1: Define variables in the Codelessly Editor
Use the ${} templating syntax in input fields to link data from the Codelessly editor to layouts as shown below.

To link the title of a text widget to the title variable in the Codelessly editor, put ${title} in the text widget’s
text field.

Note: All data passed into the Codelessly widget is stored in the data object.
You can access the title variable with ${title} or ${data.title}.
Use data to reference nested JSON payloads. Example: ${data.productData.nested.json.path}

Step 2: Pass data to the layout from your app.
CodelesslyWidget(
layoutID: LAYOUT_ID,
data: {
'title': 'Fast Performance',
'description': 'Complete projects on time and easily with our APIs. Get blazing fast performance!',
},
),
copied to clipboard
Here, data parameter is a map of type Map<String, dynamic> which is used to populate information in the layout UI
where data
variable is used from the Codelessly editor. The layout UI will automatically update to reflect the new data whenever
the data is updated.
This how it looks with populated data:

Functions #
Codelessly SDK also supports calling functions for user actions such as onClick, onLongPress, etc.
CodelesslyWidget(
layoutID: LAYOUT_ID,
functions: {
'functionName': (context, reference, params) {
// TODO: Implement your function here
}),
},
),
copied to clipboard
Step 1: Add a "Call Function" Action in the Codelessly Editor
Here, we tell the button to call the native onNextButtonClicked function when pressed.

In the Codelessly Editor, you can easily add an Action to a widget. Use the Call Function action to invoke
onNextButtonClicked.

Switch to the Develop tab.
Select a widget to open the Actions panel.
Click on the + button to add a new action.
Select Call Function from the list of actions.
Click on the Settings button to bring up the Action Settings popup.
Reference the function name in the Function Name field. For example, onNextButtonClicked.

Note: The CodelesslyFunction provides a CodelesslyContext which provides internal access to the widget's data,
variables, conditions, functions, etc.
Note 2: You can declare data and functions in the global Codelessly instance to make them globally accessible
to all CodelesslyWidgets.
CodelesslyWidget Options #
CodelesslyWidget(
layoutID: '0R0Qe7wgeAJMnj3MGW4l',
isPreview: kDebugMode,
config: CodelesslyConfig(
authToken: 'LCVyNTxyLCVxQXh3WDc5MFowLjApQXJfWyNdSnlAQjphLyN1',
),
)
copied to clipboard

layoutID: The ID of the published canvas. The ID can be found in Quick Preview or under
Publish > Settings > Published Layouts.



isPreview: Whether the layout is in preview or production mode. Preview mode is meant for debugging the layout and
syncs with the changes made in the editor. Widgets in production mode are only updated when published using the
Publish button.
config: An optional CodelesslyConfig that holds the information required to authenticate your layout from the
server.

Note: Setting a CodelesslyConfig on a CodelesslyWidget overrides the global Codelessly instance settings. This
lets you embed layouts from other projects with different auth tokens.
Environment Configuration #
The CodelesslyWidget supports Preview and Published environments via the isPreview boolean.
// Global config.
Codelessly.instance.initialize(
config: CodelesslyConfig(
isPreview: true,
),
);

// Widget level. Overrides global settings for this widget.
CodelesslyWidget(
isPreview: true
);
copied to clipboard
Preview Mode #

Realtime UI updates - edits made in the Codelessly Editor are mirrored immediately to the app.

When isPreview is set to true, the CodelesslyWidget will stream UI updates from the Codelessly Editor in realtime. Any
edits to the UI in the editor will update in the app immediately. We think this is a pretty amazing feature so give it a
try!
Use preview mode to test and prototype UI quickly.
Flavor Support
A common request is to enable Preview mode in QA environments to support updating the UI on test user's devices. That
can be done by setting the isPreview value based on the flavor or runtime environment.
// Global config.
Codelessly.instance.initialize(
config: CodelesslyConfig(
isPreview: FlavorConfig.flavor != "prod",
),
);
copied to clipboard
This enables realtime updates on release devices in a test environment, excluding production.
Production Mode #

Publish UIs with absolute control over updates and versioning.

isPreview should be set to false for production environments to prevent the UI from changing. When running in
Publish (aka Production) mode, UI changes must be explicitly published to update the UI. This makes working in the
editor safe and prevents undesired changes from reaching end users.
Note: You do not need to change layoutIDs when switching from Preview to Production. Canvases have a single unique
layoutID that the system uses to identify layouts with. Codelessly Servers will automatically handle loading the correct
layout when moving from Preview to Production.
Configuration Options #
CodelesslyConfig #
Codelessly.instance.initialize(
config: CodelesslyConfig(
authToken: AUTH_TOKEN,
isPreview: kDebugMode,
preload: true,
automaticallyCollectCrashReports: true,
),
);
copied to clipboard
CodelesslyConfig supports the following configuration capabilities.

isPreview: Global enable or disable preview-mode setting.
preload: Preload layouts to improve performance. When layouts are preloaded, they load instantly and behave like
local widgets. true by default.
automaticallyCollectCrashReports: Report SDK crashes to Codelessly. true by default. You can optionally disable
this behavior.

Global Data and Functions #
Data and functions registered in the global Codelessly.instance are available to all CodelesslyWidgets.
Codelessly.instance.initialize(
data: {'username': 'Sample User', 'paid': false},
functions: {
'openPurchasePage': CodelesslyFunction(
(context) => Navigator.pushNamed(context, "PurchasePage")),
},
);
copied to clipboard
Additional Resources #
Additional resources and tutorials are on
our documentation website.
If you have any questions or run into any issues, please open an issue or email us
at [email protected].
For the latest information on releases and product updates, subscribe to our newsletter on
the Codelessly Website.