Flutter无代码集成插件codelessly_sdk的使用

Codelessly CloudUI™ SDK 为Flutter应用提供动态UI和实时更新功能，允许您无需编写代码即可构建和发布UI。以下是详细步骤和示例代码。

快速入门

步骤1：导入库

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  codelessly_sdk: ^latest_version

确保将 ^latest_version 替换为最新发布的版本号。

步骤2：初始化SDK

在调用 runApp() 之前初始化 Codelessly SDK：

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize SDK.
  Codelessly.instance.initialize(
    config: CodelesslyConfig(
      authToken: 'YOUR_AUTH_TOKEN', // 在 Codelessly Editor 中获取
      isPreview: kDebugMode,        // 是否处于预览模式
    ),
  );

  runApp(const MyApp());
}

步骤3：嵌入 CodelesslyWidget

使用 layoutID 将设计从 Codelessly Editor 嵌入到您的应用中：

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: 'YOUR_LAYOUT_ID', // 在 Codelessly Editor 中获取
        loadingBuilder: (context) {
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

完整示例

以下是一个完整的示例，展示了如何使用 CodelesslyWidget：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  Codelessly.instance.initialize(
    config: CodelesslyConfig(
      authToken: "YOUR_AUTH_TOKEN",
      isPreview: kDebugMode,
      preload: true,
    ),
  );

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Map<String, dynamic> licenseData = {'license': 'FREE'};

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Codelessly SDK Example')),
        body: Center(
          child: CodelesslyWidget(
            layoutID: "YOUR_LAYOUT_ID",
            data: licenseData,
            functions: {
              'onFreeSelected': (context, reference, params) {
                setState(() {
                  licenseData['license'] = 'FREE';
                });
              },
              'onProSelected': (context, reference, params) {
                setState(() {
                  licenseData['license'] = 'PRO';
                });
              },
              'onBusinessSelected': (context, reference, params) {
                setState(() {
                  licenseData['license'] = 'BUSINESS';
                });
              },
            },
            loadingBuilder: (context) {
              return const Center(child: CircularProgressIndicator());
            },
          ),
        ),
      ),
    );
  }
}

注入数据

您可以将数据传递给布局以自定义 UI。例如：

CodelesslyWidget(
  layoutID: 'YOUR_LAYOUT_ID',
  data: {
    'title': 'Fast Performance',
    'description': 'Complete projects on time and easily with our APIs. Get blazing fast performance!',
  },
)

在 Codelessly Editor 中，您可以使用 ${} 模板语法来链接变量和数据。

函数支持

Codelessly SDK 支持调用函数以响应用户操作（如点击、长按等）：

CodelesslyWidget(
  layoutID: 'YOUR_LAYOUT_ID',
  functions: {
    'onNextButtonClicked': (context, reference, params) {
      // 实现您的函数逻辑
    },
  },
)

在 Codelessly Editor 中，您可以轻松地向小部件添加“调用函数”动作。

全局配置选项

您可以全局设置数据和函数，使其对所有 CodelesslyWidget 可用：

Codelessly.instance.initialize(
  data: {'username': 'Sample User', 'paid': false},
  functions: {
    'openPurchasePage': CodelesslyFunction(
      (context) => Navigator.pushNamed(context, "PurchasePage")),
  },
);

结论

Codelessly SDK 提供了强大的功能，使您能够在不编写代码的情况下构建和更新 Flutter 应用的 UI。通过使用 CodelesslyWidget，您可以轻松地将动态 UI 集成到您的应用中，并利用其丰富的功能集实现更灵活的应用开发。

更多资源和教程请访问 Codelessly 文档网站。如果您有任何问题或遇到任何问题，请打开一个 issue 或发送电子邮件至 codelessly@gmail.com。