Mason 🧱 – boost your Flutter development

What if you could complete the majority of your tasks with the least effort possible? By introducing more daily automation, the Mason tool can improve the productivity of whole Flutter development teams and individuals. It’s possible to write a single piece of code as a brick template, which can be reused across a project. With the help of this blog article, you’ll learn how to build such a feature bloc!

What is Mason?

Mason is an open-source tool created by Felix Angelov that allows you to generate code from custom templates called bricks. It comes in handy a lot when writing repetitive code. Let’s say your team uses the same widget for the project – with the help of Mason you can generate the dynamically-varied code from the template. GitHub repositories allow for the remote management of a project’s brick templates as well as local ones within the project itself. Mason is written in Dart but it can be used to generate code in any programming language.

Installation

We can install Mason in two ways:

dart pub global activate mason

brew install mason

By doing this, you’ll be able to use the terminal to connect to Mason from anywhere. I would recommend you use the first one as with the second one there might be problems with hooks. After you install it, you can just type mason in the terminal to get all the outputs.

Creating a Mason project

We use mason init commands to initialize mason and officially create the project.

When you do this, you’ll get the mason.yaml file in your project directory, which contains information on all your bricks.

Just like we add packages in pubspec.yaml, mason.yaml is where we add bricks. 

Bricks can be added using:

1. local path
2. GitHub
3. brickhub.dev

Mustache templating syntax

Mason uses “mustache templating syntax” which allows the creation and removal of reusable blocks. You can see that all variables are in “mustache” brackets. Check out the mustache docs for more information.

How to create your own bricks?

Bricks 🧱 are just reusable templates that you can change and use to make code with dynamic variables. A command-line argument or prompt can be used to gather the input variables requested by a brick and then be injected into the brick before the newly generated code is written to disk.

The mason new command can be used to generate a new brick template.

mason new your_filename

Once this is done, Mason will give us an output that the files for the brick have been created. We will have information about the generated files: __brick__ folder, brick.yaml, and not as important CHANGELOG.md, LICENSE, and README.md.

However, creating a brick is not everything. In mason.yaml we have all the installed bricks in the current project. After creating the brick we have to add it there. We can do it manually or from the console in three ways:

mason add your_filename --path your_filepath

mason add brick_name (from brickhub.dev)

mason add brick_name --git-url your_github_brick_url --git-path bricks/hello_world

Mason’s folder structure

We start by recreating what we want to do. Below are the files we will want to generate later from our bricks. We need to recreate this in the brick folder. We can pass the path as a variable and then it will be generated that way. The only thing we will be passing is the name.

What does our cubit look like?

Here is a comparison of what our cubit looks like where we started and the cubit as a brick (template). We simply have #snakeCase and the text that will be generated. It may seem long by using these functions, but it’s quite simple.

Variables and brick.yaml

In brick.yaml we define the variables we will use to generate. One of these is the name of our brick (in the screenshot widget_with_cubit_and_freezed). In Mason, we can use three types of variables: bool, name, string. Default means that when the generator creates a brick and we don’t enter anything in place of a name, Home will be used. Prompt is what we will see when we want to generate a brick and are asked to enter a name. 

How to generate the code?

Mason is a CLI tool, so we can use it directly from the console using the mason make command.

mason make your_filename

Output

Installing bricks locally and globally

Why do we need to generate a project that has just been created? To do it in the app project we are working in, we need to install our brick with the -g flag, so we can use the brick everywhere. Mason will hold a reference to it. 

mason add -g your_filename --path ../your_filepath

mason add -g hello_world --git-url httrps://github.com/felangel/mason.git --git-path bricks/hello_world

What’s next?

There are two more things that can be explored further. 

The first is Dart’s code generation, which opens up a big field for generating code from bricks. We can set up scenarios and generate several bricks one after another, and write an application in Dart to handle this.

The second thing is Hooks, which we also write in Dart. There are two types of Hooks: pre-gen and post-gen. With this, we can add things that will change the generated files and it extends Mason’s capabilities.

Write code quickly and consistently

The use of a Dart template generator makes it easier for any Flutter Developer to swiftly and reliably generate files. Without having to write repetitive code, you can increase save time and create templates for projects. There is a mason repo where you can keep up with the project’s progress and give input. If you are looking for further helpful materials that can improve your work as a Flutter Developer, check out the blog post on Flutter widgets.