Flutter Lowder

是什么

Flutter Lowder 是一个轻量级的 Flutter 低代码开发工具。使用 Lowder Editor,构建你的应用 模型,本插件将解析并执行它。

如何工作

Lowder 由 编辑器解释器 组成,两者都使用 模型 文件。编辑器 是一个可视化界面,你可以在其中创建应用的 UI 和逻辑。模型 是一个 JSON 文件,包含在 编辑器 中创建的对象。解释器(本包)是加载和执行 模型 的一组类。

为什么

  • GUI:轻松地可视化构建你的应用。

  • 速度:快速创建新屏幕,更新表单或只需修复一个错别字。

  • 减少编码:在需要时编码你的自定义小部件和业务逻辑,然后使用 编辑器 完成其余工作。

  • 空中更新:由于 模型 是一个文件,你可以修改它并将其部署到某个地方,应用可以从那里下载和加载它。

用法

开始

在您选择的文件夹中打开一个终端窗口。

使用 flutter create 命令创建一个新的 Flutter 项目。

flutter create lowder_hello

导航到新创建的 lowder_hello 文件夹。

cd lowder_hello

将此包添加到项目中(需要帮助?)。

flutter pub add lowder

pubspec.yaml 文件中设置资源。

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

使用您喜欢的编辑器打开 lib 文件夹中的 main.dart 文件,并用以下内容替换所有内容

import 'package:flutter/widgets.dart';
import 'package:lowder/widget/lowder.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends Lowder {
  MyApp() : super("My App");

  @override
  List<SolutionSpec> get solutions => [
        SolutionSpec(
          "Hello",
          filePath: "assets/hello.low",
        ),
      ];
}

就这样完成了。

现在让我们启动 Lowder 编辑器,从终端窗口执行以下命令

dart run lowder

这可能需要几秒钟,因为它需要构建该应用的 Web 版本。

您将看到类似以下的输出

Compiling lib\main.dart for the Web...                             47,0s
Serving at http://0.0.0.0:8787
Open Editor at https://:8787/editor.html

准备就绪后,打开浏览器并访问 https://:8787/editor.html

这就是 Lowder Editor。您将在其中创建应用的屏幕。

让我们开始创建一个新屏幕。 给它命名为 Hello Screen,然后点击 Ok

接下来,选择新屏幕的根 Widget。让我们选择 Material

现在点击 +Material Widget 添加一个子 Widget。

让我们选择一个 Center Widget。

并为我们的 Center Widget 添加 Text Widget。

现在,选择 Text Widget,然后在 属性面板value 属性中键入“Hello Lowder”。

通过展开 Style 属性并将 FontSize 设置为 20 来增加字体大小。

目前就到这里。探索 编辑器,创建其他屏幕,玩弄属性,别忘了 保存。像构建任何其他 Flutter 项目一样构建和运行它。

查看 示例 以了解更多关于 Flutter Lowder 的信息。玩得开心,并告诉我您的想法和建议。

附加说明

使用 Flutter Lowder 并不意味着您将不再编写代码,远非如此。它的目的是作为您项目的起点,您将在其中根据需要添加自己的 Widgets 和 Actions,以丰富 Lowder 的预设 Widgets 和 Actions。它将使实现屏幕、导航和业务逻辑更加容易和快捷,或者只需修复一个标签或一个错别字。它不打算规定您应该使用什么,因此它具有最少的依赖关系,并避免依赖解决问题。因此,如果您想(并且将会)使用其他包,只需扩展 Lowder 并使其提供新的 Widgets 和 Actions。

GitHub

查看 Github