How to reduce your time to set up a project in Flutter using Mason….

Here we go, When we are developing something we follow some structure of the project(basically a Template). Most of the company do, they use some templates for projects, but every time we have to do the same steps to set up a project like creating Constant files, Network files, some basic packages we need to add, the structure of the folder in the project, all these things we need to do again and again.

But this is a very time-consuming process, sometimes it takes half a day, and sometimes it takes a whole day to set up a project.

We can create a template for our project according to our needs and use it.

Now, How can I create a Custom Template and used for ourself/company?

In this case, Mason came to us and rescued us from that hassle.

Mason is a CLI tool (Command Line tool) created by Felix Angelov at Very Good Ventures. It is an open-source project that generates files from a custom template.

It can help to increase developer productivity by doing time-consuming jobs with automation in their everyday task.

Yeah, I know setting up a project is a one-time job, but suppose you have to create StatelessWidget or StatefullWidget each time, you need to create a dart file add Class Name, and then add imports.

For that, you can use a single command of Mason, and all these things are done by itself.

Mason is using Mustache(Logicless Template) to generate a template. We are saying Bricks to those custom templates.

Let’s Start How we can use it

First, we need to install Mason in our system:-

# Install from pub.dev
$ dart pub global activate mason_cli

# Install from homebrew
$ brew tap felangel/mason
$ brew install mason

Verify if Mason installs successfully or not type mason in a terminal.

If the above output is coming after typing Mason and hint enter, that means Mason is successfully installed on the system.

How we can use Mason to create a template?

Now we are going to start our first template or you can say that brick. We have to use a few commands of Mason for that, I will explain each command 1 by 1.

$ mason new <brickName>

Example:- $ mason new st_widget

The above command will create a few files as the below output shows:-

st_widget folder will be created in that folder these files created.

In this folder README.md, CHANGELOG.md, and LICENSE were also created. We already know why we used so, so I am not explaining these files for now.

We need to focus on 2 files:-

• brick.yaml
• __brick__

brick.yaml

This is an important file for our template. This file will show your template information, like the name of your brick/template, the description of your brick, version, environment, and more importantly, vars (variables) that variable we can use for our template.

brick.yaml file is look like below:-

__brick__

Under this folder, we need to add our template file or project structure.

Example:- In this example, we will make a dart file which is either a stateless or stateful file based on the input.

We will get 2 values, while we use mason make command on the terminal:-

• Name of file
• True/false based on whether we want a stateless widget or a stateful widget.

The following code is used for getting 2 values from the user:-

name: st_widget
description: A new brick created with the Mason CLI.


version: 0.1.0+1

environment:
  mason: ">=0.1.0-dev.51 <0.1.0"

vars:
  name:
    type: string
    description: name of file
    default: Dash
    prompt: What is your widget file name?
  
  isStateless:
    type: boolean
    description: Is this widget is Stateless or Statefull
    default: true
    prompt: Is this Stateless Widget?

Now we need to create files under the __brick__ folder.

Create a new file with this format under the __brick__ folder:-

{{name.snakeCase()}}.dart

Need to add the following code to the above file created:-

import 'package:flutter/material.dart';

{{#isStateless}}
class {{name.pascalCase()}} extends StatelessWidget {
  const {{name.pascalCase()}}({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
{{/isStateless}}

{{^isStateless}}
class {{name.pascalCase()}} extends StatefulWidget {
  const {{name.pascalCase()}}({super.key});

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

class _{{name.pascalCase()}}State extends State<{{name.pascalCase()}}> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
{{/isStateless}}

Here our brick template is ready for use.

How we can implement a brick template in our project?

First, we need to initialize Mason in our project using $ mason init command in your project.

Open mason.yaml file add your brick path into it. as blow

Run the following command:-

$ mason get

This command will generate .mason folder into your project structure as below:-

Now we are ready to generate a template from Mason Brick.

First, we need to go where we wanna create a file from Mason and run the following Command:-

$ mason make st_widget

And finally, your file is generated successfully.

I hope this will help you to understand how we can create a template by using Mason CLI to save time.

Here are some useful links for understanding more about Mason CLI:-

Lambdas used in Mason:- Click here

More about Mustache:- mustache specification

Official documentation of Brickhub:- Click here