我最近为 Nylo 发布了 v1.1.0，这是一个面向 Flutter 开发人员的微框架。

我创办 Nylo（早在 2020 年 8 月）的目标是让从头开始开发 Flutter 应用程序更容易。 Nylo 的独特之处在于它仍然是您喜爱的 Flutter，只是为了让您的开发生活更轻松。

1. 开始使用 Nylo

你可以通过以下方式下载：

https://nylo.dev
git clone https://github.com/nylo-core/nylo.git

1.1 构建项目

当您第一次在项目上运行构建时，您将看到下面的默认应用程序界面。

Nylo 的默认着陆页面

1.2 让我们深入了解一些代码

我们将涵盖以下方面：

Router
Widgets
Config
Metro Cli tool
Folder Structure

2. Router

文件 — /routers/router.dart

buildRouter() => nyCreateRoutes((router) {
  router.route("/", (context) => MyHomePage(
    title: "Hello World",
  ));

  // 在这里添加你的路由
  // router.route("/new-page", (context) => NewPage());
});

项目的所有路由都可以添加到这里。

route 方法需要两个必选参数。

routeName — 这是路由的名称，例如“/profile-page”
你要显示的Widgets。你可以在上面的示例中看到“/new-page”路由使用 NewPage() Widgets。

你也可以像下面的例子那样添加过渡。

router.route("/about-page", (context) => AboutPage(
    title: "Hello World",
  ), transition: PageTransitionType.fade
);

3. Widgets

Widgets的位置：

/resources/pages/
/resources/widgets/

默认情况下，有两个文件夹。一个用于你的“页面”，另一个用于您的Widgets“组件”，例如无状态/有状态 Widgets。

你的“页面”可以是普通的 Flutter Widgets，也可以扩展 NyStatefulWidget 以获得额外的超能力。让我们来看看下面的样子。

...
import 'package:flutter_app/resources/widgets/safearea_widget.dart';
import 'package:nylo_support/widgets/ny_state.dart';
import 'package:nylo_support/widgets/ny_stateful_widget.dart';

class MyHomePage extends NyStatefulWidget {
  final HomeController controller = HomeController();

  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends NyState<MyHomePage> {
  
  @override
  widgetDidLoad() async {
   // runs after initState()
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello World"),
        centerTitle: true,
      ),
      body: Container(
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                getEnv("APP_NAME"),
                style: Theme.of(context).textTheme.headline2,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

看起来很熟悉吧？

NyStatefulWidget 类提供了将数据从一个“页面”传递到另一个“页面”的功能。

4. Config 配置

文件 — /.env

Nylo 附带一个.env 文件，该文件提供项目的所有环境变量。你可以添加和定制这些值，然后像下面的例子一样在整个项目中使用它们。

APP_NAME="Nylo"
APP_DEBUG=true
APP_URL="https://nylo.dev"
...

在widget内使用APP_NAME

Text(
  getEnv("APP_NAME"),
  style: Theme.of(context).textTheme.headline2,
),

它还返回变量的 bool 类型。

5. Metro CLI tool CLI工具

我还构建了一个 CLI 工具来在您的项目中创建内容，以下是您可以创建的一些内容：

Models
Controllers
Pages
Stateful widgets and stateless widgets
Building your app icons

让我们看看如何使用Metro CLI工具。

创建一个新页面

metro make:page about_page -c

创建一个模型

metro make:model Product

这将为位于 app/models/ 的项目中的“Product”创建模型

构建APP ICON

metro appicons:build

这将建立你所有的应用程序图标，Nylo使用Flutter Launcher Icons包，并将从你的 /public/app_icon/ 目录中的图标创建图标。

在此处了解有关 Metro CLI 的更多信息。

6. Folder Structure 文件目录结构

Nylo 引入了简化的文件夹结构，为您提供构建应用程序时的简化方法。它的灵感来自于Laravel，（在我看来）在浏览源文件的时候，使开发生活变得轻而易举。

你可以在这里阅读更多关于文件夹结构的信息。

7. Wrapping up

如果你已经来到这里，我邀请你尝试Nylo并向我发送你的反馈。它并不完美，但我认为这是朝着正确方向迈出的一步，有助于更轻松地构建移动应用程序。

如果你想为这个开源项目做出贡献，请点击
https://github.com/nylo-core/nylo查看git存储库。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/29118.html