v0.2.0 Release

- New simplified variables system. Variables passed into the CodelesslyWidget can now be referenced by name in the Codelessly Editor.

```
CodelesslyWidget(
  data: {
    'title': 'My Title',
    'productData': { // JSON Data
      'nested': {
        'json': {
          'path': 'Hey there!',
        }
      }
    }
  }
)

// Now you can access the variable directly in the Codelessly Editor.
${title} - 'My Title'

// Or, using the `data` object.
${data.title} - 'My Title'
${data.productData.nested.json.path} - 'Hey there!'
```

- New SVG image support!
- New hosted website publishing support.
- Add `>=`, `<=`, and `== null` operators.
- Add data and variable support for dropdown component.
- Add Material 3 Switch UI component.
- Add Rounded Circular Progress Indicator component.
- Improve InkWell behavior. Show Inkwell effect on top of other widgets.
- Prototype implementation of custom widget embedding feature.

Author: rayliverified

CHANGELOG.md

@@ -1,3 +1,37 @@
+## 0.2.0
+- New simplified variables system. Variables passed into the CodelesslyWidget can now be referenced by name in the Codelessly Editor.
+
+```
+CodelesslyWidget(
+  data: {
+    'title': 'My Title',
+    'productData': { // JSON Data
+      'nested': {
+        'json': {
+          'path': 'Hey there!',
+        }
+      }
+    }
+  }
+)
+
+// Now you can access the variable directly in the Codelessly Editor.
+${title} - 'My Title'
+
+// Or, using the `data` object.
+${data.title} - 'My Title'
+${data.productData.nested.json.path} - 'Hey there!'
+```
+
+- New SVG image support!
+- New hosted website publishing support.
+- Add `>=`, `<=`, and `== null` operators.
+- Add data and variable support for dropdown component.
+- Add Material 3 Switch UI component.
+- Add Rounded Circular Progress Indicator component.
+- Improve InkWell behavior. Show Inkwell effect on top of other widgets.
+- Prototype implementation of custom widget embedding feature.
+
 ## 0.1.0
 - Update CodelesslyAPI v0.1.0.
 - Optimize SDK size by 90% by switching to SVG icons.

README.md

@@ -28,7 +28,7 @@ Initialize Codelessly before calling `runApp()`.
 ```dart
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
-  
+
   // Initialize SDK.
   Codelessly.instance.initialize(
     config: CodelesslyConfig(
@@ -84,7 +84,7 @@ class MyApp extends StatelessWidget {
 
 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`. 
+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](https://docs.codelessly.com/getting-started/3-minute-quick-start).
 
@@ -103,15 +103,17 @@ CodelesslyWidget(
 
 #### **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. 
+Use the `${}` templating syntax in input fields to link data from the Codelessly editor to layouts as shown below.
 
 ![Data](packages/ui_with_data_linking.png)
 
-To link the title of a text widget to the `title` variable in the Codelessly editor, put `${data.title}` in the text widget’s text field.
+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:** The `data` object contains all the variables passed to the CodelesslyWidget. 
+> **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.title}` to access the `title` variable passed from the client. `${title}` alone is a Codelessly variable and will try to load variables defined in Codelessly, not your client.
+> Use `data` to reference nested JSON payloads. Example: ${data.productData.nested.json.path}
 
 #### **Step 2:** Pass data to the layout from your app.
 
@@ -212,7 +214,7 @@ CodelesslyWidget(
 
 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. 
+Use preview mode to test and prototype UI quickly.
 
 #### Flavor Support
 

lib/src/ui/codelessly_widget.dart

@@ -1,16 +1,12 @@
 import 'dart:async';
 import 'dart:developer';
 
-import 'package:codelessly_api/codelessly_api.dart';
-import 'package:collection/collection.dart';
-import 'package:equatable/equatable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:provider/provider.dart';
 
 import '../../codelessly_sdk.dart';
 import '../logging/error_handler.dart';
-import 'codelessly_context.dart';
 import 'codelessly_error_screen.dart';
 import 'codelessly_loading_screen.dart';
 import 'layout_builder.dart';
@@ -31,7 +27,6 @@ typedef CodelesslyWidgetErrorBuilder = Widget Function(
 
 Widget _defaultLayoutBuilder(context, layout) => layout;
 
-
 /// SDK widget that requires the SDK to be initialized beforehand.
 ///
 /// The SDK can be instantiated in several ways:
@@ -323,8 +318,10 @@ class _CodelesslyWidgetState extends State<CodelesslyWidget> {
       codelesslyContext.functions = widget.functions;
     }
 
-    if (widget.externalComponentBuilders != oldWidget.externalComponentBuilders) {
-      codelesslyContext.externalComponentBuilders = widget.externalComponentBuilders;
+    if (widget.externalComponentBuilders !=
+        oldWidget.externalComponentBuilders) {
+      codelesslyContext.externalComponentBuilders =
+          widget.externalComponentBuilders;
     }
 
     if (widget.controller == null && oldWidget.controller != null) {

pubspec.yaml

@@ -1,6 +1,6 @@
 name: codelessly_sdk
 description: Codelessly CloudUI™ - Supercharge your Flutter apps with dynamic UI and real-time updates. Build and publish UI without code!
-version: 0.1.0
+version: 0.2.0
 homepage: https://codelessly.com/
 repository: https://github.com/Codelessly/CodelesslySDK
 
@@ -19,7 +19,7 @@ platforms:
 dependencies:
   flutter:
     sdk: flutter
-  codelessly_api: 0.1.0
+  codelessly_api: 0.2.0
   equatable: ^2.0.5
   google_fonts: ^5.1.0
   json_annotation: ^4.8.1