Flutter微框架Nylo（一）：开始

简介

此系列文章主要为翻译Nylo官网。

Nylo是Flutter的微框架，旨在帮助简化应用程序开发。每个项目都提供了一个简单的样板，以帮助您更轻松地构建应用程序。Nylo 是一个开源的，也是 MIT 许可的，所以你可以自由地构建你的项目。

新安装的 Nylo 包含标准化的文件结构和配置，因此可以直接开始开发您的项目。

1. 安装

可以在此处下载 Nylo，也可以使用以下命令克隆 git 存储库。

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

注意：首次打开项目时运行 flutter pub get 以获取所有依赖项。

Nylo 项目以构建 Flutter 应用程序的"正常"方式运行。根据所选择的IDE，此部分将略有不同。请查看官网运行flutter项目步骤。

2. Metro CLI工具

Nylo提供了一个名为Metro的CLI工具。它已经构建好了，所以你可以在终端中运行命令来创建东西。使用 Metro，您可以在项目中创建以下内容：

Models （模型）
Controllers （控制器）
Pages （页面）
Stateful widgets and stateless widgets （有状态小部件和无状态小部件）
Events （事件）
Providers （供应商）
API Services （接口服务）
Themes （主题）
Route Guards （路线守卫）

例如，运行 dart run nylo_framework:main make:model Property 将在您的项目中创建新的"Property"模型。

要访问菜单，您可以在终端中运行以下命令。

dart run nylo_framework:main

3. 为Metro创建别名（Mac 指南）

每次要运行命令 dart run nylo_framework:main时输入的时间很长。因此，为了方便起见，可以创建一个别名。如果您不熟悉别名，它们允许您为命令创建替代名称。例如， dart run nylo_framework:main 可以变成 metro。

1). 打开您的bash_profile

sudo open ~/.bash_profile

2). 将此别名添加到您的bash_profile

ini 复制代码

...
alias metro='dart run nylo_framework:main'

3). 然后运行以下命令

source ~/.bash_profile

现在，您可以从终端键入 metro 以在 Nylo 项目中运行命令。

如果您不确定在哪里添加上述内容，请查看一些在线指南，了解在哪里可以找到您的bash_profile文件。上面的示例假定您的bash_profile位于您所在 ~/ 的位置。如果使用了iTerm终端软件，请查看对应的配置修改在线指南。

4. 配置

Nylo 提供了一个 .env 文件，其中包含全局配置变量，例如应用程序名称、默认区域设置和应用程序的环境。此文件位于项目的根目录，名为".env"。

ini 复制代码

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

ASSET_PATH_PUBLIC=public/assets/
ASSET_PATH_IMAGES=public/assets/images
TIMEZONE=UTC
DEFAULT_LOCALE=en

您可以在此处添加新变量，然后使用 getEnv() 在代码中获取它们。

ini 复制代码

import 'package:nylo_framework/nylo_framework.dart';
String appName = getEnv('APP_NAME');

1). 环境配置

配置应用程序环境非常简单。打开 .env 文件，然后更新环境文件中的密钥。还可以在此处添加其他键，例如 SHOW_ADS="false" .

不要存储任何敏感或大的东西。不要将 .env 文件提交到（公共/私有）存储库。

2). 环境变量类型

`.env` 文件	返回类型
APP_NAME="MySuper App"	String
DEBUG_MODE=true	Boolean
URL_TERMS=null	null

3). 设置默认值

在 Nylo 中，从 .env 文件中获取值很简单，调用 getEnv(String key) 获取值。如果 .env 文件中不存在该键，还可以提供默认值。

ini 复制代码

String appName = getEnv('APP_NAME');

ini 复制代码

String locale = getEnv('DEFAULT_LOCALE', defaultValue: "en");

int httpConnectionTimeout = getEnv('HTTP_CONNECTION_TIMEOUT', defaultValue: (60 * 1000));

4). 不同环境

在 Nylo 中，您可以从不同的环境"风格"构建应用程序。这允许您创建单独的 .env 文件，例如'production', 'staging' 或者 'developing'，然后从配置构建您的应用程序。

首先，在项目的根级别创建一个新文件，例如 .env.production .然后，您可以在此文件中定义所有 env 变量。

接下来，将新的 env 文件添加到文件中的 pubspec.yaml "assets"中。

pubspec.yaml

arduino 复制代码

assets:
    ...
    - .env
    - .env.production // 新增

然后，从终端中，通过指定 env 文件来构建您的 Flutter 应用程序，如以下示例所示。

ini 复制代码

flutter run --dart-define="ENV_FILE=.env.production"
flutter run --dart-define="ENV_FILE=.env.developing"
// 或者
flutter build ios --dart-define="ENV_FILE=.env.developing"
flutter build appbundle --dart-define="ENV_FILE=.env.developing"

5. 目录结构

每个 Nylo 项目都带有一个简单的样板来管理您的文件。以此结构简化项目的开发。目录结构的灵感来自Laravel。

1). 应用目录

以下应用目录列在 lib 文件夹中。

app 此文件夹包含与模型、控制器和网络相关的任何文件。
- controllers 在此处为您的小部件页面包含您的控制器。
- models 在此处创建模型类。
- networking 在此处添加任何 API 服务，用于管理 API 或从互联网获取数据。
- events 在此处添加所有事件类。
- providers 在此处添加应用运行时需要启动的任何提供程序类。
config 此文件夹包含配置文件，例如字体、主题和本地化设置。
- font 使用此配置文件管理应用的字体。
- theme 设置和配置应用程序使用的主题。
- localization 管理此文件中与区域设置相关的本地化、语言和其他内容。
- decoders 注册模型解码器和 apiDecoders。
- events 在 Map 对象中注册事件。
- providers 在 Map 对象中注册提供程序。
- validation_rules 注册自定义验证规则。
resources 此文件夹包含作为用户 UI 体验的关键组件的任何文件，例如页面、小组件和主题。
- pages 在此处包含小部件，将在项目中用作页面。例如home_page.dart。
- themes 默认情况下，您会在此处找到浅色和深色模式的两个主题，但您可以添加更多主题。
- widgets 您需要创建的任何小部件都可以在此处插入，例如 date_picker.dart 文件。
routes 此文件夹包含与路由相关的任何文件。
- router.dart 应用程序的默认路由器，您可以在其中添加路由。

2). 资源

public/assets此目录用于图像、字体和您可能希望包含在项目中的更多文件。

将任何新文件添加到 pubspec.yaml 文件中也很重要。

app_icon 这用于为项目生成app_icons。
images 在此目录中包含任何图像。
fonts 在此处添加任何自定义字体。

3). 使用资源

可以通过运行以下命令在 Flutter 中使用正常的标准方式：

less 复制代码

Image.asset(
    Image.asset('public/assets/images/my_logo.png'),
    height: 50,
    width: 50,
),

或者你可以使用 getImageAsset(String key)

less 复制代码

Image.asset(
    getImageAsset("nylo_logo.png"),
    height: 50,
    width: 50,
),

可以使用方法 getPublicAsset(String key)获取任何公共资产。

scss 复制代码

_controller = VideoPlayerController.asset(
    getPublicAsset('videos/intro.mp4'))
    ..initialize()
    .then((_) {
        setState(() {});
    });