Flutter图像处理插件theta的使用

开始使用 • 文档 • 示例 • 社区与支持 • 网站

Theta

设计到Flutter只需一个命令。

• 独角兽？ 手动编写整个UI可能会耗费大量时间和成本。通过一个命令即可将设计转化为Flutter。
• 团队？ 个人开发者和团队希望通过更快更直观的方式开发UI。

设计到Flutter

三步流程：

1. 使用Theta构建您的UI。

   • 网站: Theta Studio
   

2. 导航到Flutter项目并打开终端：

   安装Theta CLI。

   $ dart pub global activate theta_cli
   

   通过项目密钥链接项目。

   $ theta link -k <anon key>
   

   生成文件：

   $ theta gen
   

3. 使用生成的UI小部件：

   Theta会生成以下文件：

   • /assets
     • /theta_assets
       • theta_preload.json
       • …所有媒体
   • /lib
     • theta_ui_assets.g.dart
     • theta_ui_widgets.g.dart

   您可以像使用普通小部件一样使用它们：

   PaywallWidget(
       initialTheme: ThemeMode.light,
   )
   

   在运行应用之前：

   1. 初始化ThetaClient实例以启动您的项目。在应用程序根目录写入以下代码：

      await initializeThetaClient();
      

   2. 在pubspec.yaml文件中添加theta_assets文件夹的路径，以便访问小部件数据：

      assets: 
          - assets/theta_assets/
      

祝贺你，现在你有了你的UI 🥳

实时小部件

实时获取后端小部件

您可以轻松地通过设置isLive: true来启用实时功能。

PaywallWidget(
    initialTheme: ThemeMode.light,
    isLive: true,
)

通过将其设为实时，您可以从Theta编辑器中进行A/B测试或实时更新其内容。

贡献

详情请参阅 CONTRIBUTING.md。

许可证

Theta 是根据Apache License 2.0许可发布的。详情请参阅 LICENSE。

示例代码

import 'package:example/theta_ui_widgets.g.dart';
import 'package:flutter/material.dart';
import 'package:theta/theta.dart';

final date = DateTime.now();

void main() async {
  await initializeThetaClient();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _controller = UIBoxController();

  [@override](/user/override)
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 5), () {
      _controller.changeTheme(ThemeMode.dark);
    });
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    /// ThetaProvider是用于提供项目样式的。
    /// 使用Theta小部件时必须使用它。
    return MaterialApp(
      home: Scaffold(
        /// UIBox是主小部件。
        /// 用于构建UI。
        /// 需要一个组件[name]。
        body: PaywallTeamWidget(
          initialTheme: ThemeMode.light,
          controller: _controller,
          isLive: false,
        ),
      ),
    );
  }
}