在 Flutter 应用中使用 Mason 和bricks：初学

TL;DR：Mason 是一个 Dart 包，它允许您基于模板创建文件和目录。您可以在 Flutter 项目中使用 Mason，首先创建和注册模板（也称为砖块），然后利用它们创建文件和文件夹。或者，您可以使用其他人从 GitHub 或 BrickHub.dev 制作的积木。

什么是Mason？

Mason是一个开源模板生成器，由来自Very Good Ventures的]Felix Angelov创建。它用于从预定义的模板生成文件和目录，以提高开发人员的工作效率。这些可重复使用的模板称为积木。块可以是一个文件或嵌套文件和目录的集合。

一旦定义了积木模板，开发人员就可以使用Mason CLI从这些积木创建、管理和生成新文件。Mason 在大型项目中非常有用，因为它为开发人员提供了明确的指导并有助于保持代码的一致性。

您将在本教程中学到什么

在本教程结束时，您将学习如何：

1. 安装和使用 Mason CLI
2. 创建您自己的可重复使用的bricks
3. 使用来自 GitHub 的托管bricks
4. 将 Mason 添加到您的 Flutter 项目中
5. 使用来自 BrickHub.dev 的远程bricks

下面，您可以找到完整的 Mason 示例项目。您现在可以在浏览器中实时使用它。

如何安装 Mason CLI

Mason 是用 Dart 编程语言编写的。因此，在安装 Mason CLI 之前，您应该在计算机上安装 Dart。

dart pub global activate mason_cli

如果您使用的是 Mac（或 Linux），您还可以使用Homebrew 包管理器安装 Mason 。首先，为 Mason 包添加官方tap。

brew tap felangel/mason

然后，安装 Mason 包。

brew install mason

brew upgrade您可以使用该命令更新 Mason 。

brew update
brew upgrade mason

Mason中的bricks概念

让我们通过一个简单的例子来了解bricks和Mason。Flutter 应用程序中的页面可能是有状态的或无状态的，具体取决于它对状态变化的反应，通常，每个页面都包含一个脚手架和一个 appbar。

通常，如果您的 Flutter 项目需要多个页面，您必须多次编写相同的重复代码。但是使用bricks，您可以编写模板 Flutter 页面并动态生成新页面。您还可以在这些模板中使用变量和条件来为每个页面赋予不同的名称和结构。

bricks的另一个常见用途是生成测试文件。如果你熟悉 Flutter 单元测试和小部件测试，你就会知道所有测试的基本结构都是一样的。您还可以使用 Mason CLI 和程序块的强大功能为单元测试创建程序块并一次性生成多个测试文件。

胡子语法入门

Bricks 使用 Mustache 语法在文件中添加变量和条件。要定义变量，您可以{{name}}在代码中使用该符号。然后在您的文件中注册该变量名称，bricks.yaml以便在代码生成时使用 Mason CLI 使用该变量。

vars:
  name:
    type: string
    description: What is your name?
    default: codemagic
    prompt: name?

您可以使用{{#vars}}{{/vars}}符号在代码中添加条件。如果vars变量不是 null、false 或空列表，则这些符号中存在的代码或文本将在构建时输出。如果vars为 null、false 或空列表，则这些符号之间的代码在构建时不输出任何内容。

您可以使用{{^vars}}{{/vars}}符号反转此逻辑。这种表示法就像一个else语句，当vars为 null、false 或空列表时输出其中的代码。

预定义函数也可以在 Mustache 语法中使用——在这里，它们被称为 lambdas。您可以使用 lambda 包装变量以执行不同的操作。例如，如果要将字符串变量转换为 Pascal 大小写，只需将 Pascal case lambda 包裹在变量周围。

{{#pascalCase}}{{vars}}{{/pascalCase}}

您可以在bricks模板中使用许多内置变量。

创建你的第一块bricks的指南

在创建新的bricks之前，首先在一个目录中初始化 Mason。导航到一个空目录并运行mason init以在当前目录中初始化 Mason。使用该mason init命令创建一个mason.yaml文件，您必须在其中注册您将在 Mason CLI 中使用的所有bricks。

使用 Mason CLI 创建新bricks

初始化 Mason 后，您可以使用mason new命令创建新bricks。

$ mason new widget

上面的命令创建了一个名为的新目录widget并将brick.yaml文件添加到其中。您必须在此brick.yaml文件中声明您在bricks模板中使用的所有变量。您可以在__brick__目录中添加模板文件。新创建的 Mason 目录的完整结构如下所示：

.
├── mason-lock.json
├── mason.yaml
└── widget
    ├── __brick__
    │   └── HELLO.md
    ├── brick.yaml
    ├── CHANGELOG.md
    ├── LICENSE
    └── README.md

使用mason new命令创建新砖后，请确保在mason.yaml文件中添加新的bricks。mason.yaml让我们在文件中添加我们的小部件bricks。

bricks:
  widget:
    path: ./widget/

加可重用的 Flutter 小部件模板

在本节中，我们将重点介绍使用 Mason 创建可重用的 Flutter 小部件。

1. 我们将动态更改小部件的文件名
2. 小部件将是无状态或有状态的，具体取决于条件变量
3. 它将包含一个脚手架，而脚手架又包含一个 appbar

删除hello.md目录内的widget/__brick__文件。要制作动态文件名，我们使用 Mustache 语法。由于 Flutter 小部件文件名总是以蛇形大小写，{{filename.snakeCase()}}.dart因此在__brick__目录中创建一个名为的 Dart 文件。这里，.snakeCase()是一个将filename变量转换为蛇形单词的函数。

让我们在文件中注册filename变量。brick.yaml

vars:
  filename:
    type: string
    description: widget filename
    default: widget
    prompt: filename?

将以下 Dart 代码粘贴到{{filename.snakeCase()}}.dart文件中。此代码将根据isStateless变量的值生成有状态或无状态小部件。

import "package:flutter/material.dart";
{{#isStateless}}
class {{filename.pascalCase()}} extends StatelessWidget {
  const {{filename.pascalCase()}}({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("{{filename}}",),),
    );
  }
}
{{/isStateless}}
{{^isStateless}}
class {{filename.pascalCase()}} extends StatefulWidget {
  const {{filename.pascalCase()}}({Key? key}) : super(key: key);

  @override
  State<{{filename.pascalCase()}}> createState() => _{{filename.pascalCase()}}State();
}

class _{{filename.pascalCase()}}State extends State<{{filename.pascalCase()}}> {
  @override
  Widget build(BuildContext context) {
     return Scaffold(
      appBar: AppBar(title: Text("{{filename}}",),),
    );
  }
}
{{/isStateless}}

在这里，如果isStateless变量为真，则 mason_cli 生成无状态小部件。否则，mason_cli 会生成一个有状态的小部件。看一下{{#isStateless}}and的语法{{^isStateless}}。条件逻辑是使用 Mustache 语法实现的。

不要忘记isStateless在文件中添加变量brick.yaml。

vars:
  isStateless:
    type: boolean
    description: Make a stateless widget
    default: true
    prompt: is stateless?

在 Flutter 中，widget 名称总是用 Pascal 大小写。因此，我将使用该.pascalCase()函数将文件名转换为 Pascal 大小写字符串。您还可以使用{{#pascalCase}}{{filename}}{{/pascalCase}}语法将filename变量转换为 Pascal 大小写。

我还将在脚手架内添加一个 appbar 并将该filename变量用作 appbar 标题。

让我们运行mason get命令来注册最近mason.yaml文件中的所有积木。您的小部件砖现在可以使用 Mason CLI 按需生成无状态或有状态小部件。

使用bricks和Mason生成文件

现在我们已经成功创建并注册了我们的bricks，让我们开始使用 Mason CLI 使用它来生成文件。首先，运行mason list以列出所有可用的bricks。

现在使用mason make命令在当前工作目录中生成文件。要使用 Mason CLI 使用我们的小部件bricks生成文件，请运行mason make widget命令。然后提供您在bricks.yaml文件中定义的所有变量。恭喜，您已经使用bricks和 Mason CLI 生成了 Flutter 小部件。

来自 GitHub 的bricks

您也可以直接从 GitHub 存储库中使用bricks。在您的mason.yaml文件中，添加bricks名称和 GitHub 存储库链接。

bricks:
  widget:
    path: ./widget/
  greeting:
    git:
      url: https://github.com/felangel/mason.git
      path: bricks/greeting

然后运行mason get以注册该砖以生成新文件。现在您可以在您的项目中像往常一样使用问候bricks。

将bricks和 Mason 集成到您的 Flutter 项目中

您可以轻松地将bricks和 Mason 集成到您的 Flutter 项目中。在项目的根目录下，创建一个名为mason. 在目录中，首先使用命令mason初始化 Mason 。mason init然后为您的项目创建可重复使用的bricks，如上所述。

当您想使用 Mason CLI 生成文件时，导航到 Mason 目录并mason make使用bricks的名称运行命令。请记住，您可以使用该-o标志来指定自定义输出目录。

要在您的目录中生成新的小部件lib/，请将相对路径添加../lib为输出参数。

mason make widget -o ../lib

远程bricks和 BrickHub.dev

BrickHub.dev是bricks的在线存储。您可以在 BrickHub.dev 上发现、发布和安装新的 Mason bricks。您可以使用 Mason CLI 与之交互。

要发现新的bricks，请使用mason search命令。例如，如果要搜索与状态管理相关的砖块，则应使用如下所示的 Mason CLI 命令。

mason search state

这将在您的终端中返回相关积木的列表。

现在从这个列表中选择一块bricks。我选择bloc作为一个例子。然后使用命令bloc从 BrickHub安装bricks。mason add

mason add bloc

现在您可以使用命令在项目中使用bricksmason make生成文件。bloc

要移除bricks，mason remove <brickname>请在项目中使用命令。

使用Codemagic CI/CD构建您的应用程序

当您使用bricks来标准化您的 Flutter 应用程序开发过程时，您可以使用Codemagic来自动化和标准化您的应用程序测试和构建过程。Codemagic 为您提供了一个非常易于使用的可视化编辑器来配置您的构建。它还可以将您的应用程序直接自动部署到 Apple App Store 和 Google Play Store。

如果您还不是 Codemagic 用户，可以在此处注册。

结论

这个 Mason 教程是针对初学者的，所以我让它尽可能简单。如果你一步一步地跟着它走，你已经学会了如何在你的 Flutter 项目中使用 Mason 和bricks。

现在你可以扩展你的知识来制作一个包含 Flutter 单元测试模板的测试bricks。

如果你想学习flutter，但是不知道如何去学习的话，我这里有一份flutter进阶学习学习笔记可以提供给各位参考学习，需要的小伙伴可以看下面↓↓↓

有需要的可以复制下方链接，传送直达！！！
https://docs.qq.com/doc/DQnRLUmdyV0NudFBP

第一章 为什么Flutter是跨平台开发的终极之选

• 这是为什么？

• 跨平台开发

• 什么是 Flutter

• Flutter 的特性

• Flutter 构建应用的工具

• 使用 Flutter 构建的热门应用

• 构建 Flutter 应用的成本

• 结论

第二章 在Windows上搭建Flutter开发环境

• 使用镜像

• 系统要求

• 获取Flutter SDK

• 编辑器设置

• Android设置

• 起步: 配置编辑器

第三章 编写您的第一个 Flutter App

• 创建 Flutter app

• 使用外部包(package)

• 添加一个 有状态的部件（Stateful widget）

• 创建一个无限滚动ListView

• 添加交互

• 导航到新页面

• 使用主题更改UI

第四章 Flutter开发环境搭建和调试

• 开发环境的搭建

• 模拟器的安装与调试

• 开发环境的搭建

• 模拟器的安装与调试

第五章 Dart语法篇之基础语法(一)

• Hello Dart

• 数据类型

• 变量和常量

• 集合(List、Set、Map)

• 流程控制

• 运算符

• 异常

• 函数

第六章 Dart语法篇之集合的使用与源码解析(二)

• List

• Set

• Map

• Queue

• LinkedList

• HashMap

• Map、HashMap、LinkedHashMap、SplayTreeMap区别

• 命名构造函数from和of的区别以及使用建议

第七章 Dart语法篇之集合操作符函数与源码分析(三)

• Iterable<E>

• forEach

• map

• any

• every

• where

• firstWhere和singleWhere和lastWhere

• join

• take

• akeWhile

• skip

• skipWhile

• follwedBy

• expand

• reduce

• elementAt

第八章 Dart语法篇之函数的使用(四)

• 函数参数

• 匿名函数(闭包，lambda)

• 箭头函数

• 局部函数

• 顶层函数和静态函数

• main函数

• Function函数对象

第九章 Dart语法篇之面向对象基础(五)

• 属性访问器(accessor)函数setter和getter

• 面向对象中的变量

• 构造函数

• 抽象方法、抽象类和接口

• 类函数

第十章 Dart语法篇之面向对象继承和Mixins(六)

• 类的单继承

• 基于Mixins的多继承

第十二章 Dart语法篇之类型系统与泛型(七)

• 可选类型

• 接口类型

• 接口类型

• 类型具体化

第十三章 Flutter中的widget

• Flutter页面-基础Widget

• Widget

• StatelessWidget

• StatefulWidget

• State生命周期

• 基础widget

• 文本显示

• DefaultTextStyle

• FlutterLogo

• Icon

• Iamge.asset

• CircleAvatar

• FadeInImage

• 按钮

• FlatButton

• OutlineButton

• 输入框

• 焦点控制

• 获取输入内容

• TextFormField