Metro Cli tool


Introduction

Metro is a CLI tool that works under the hood of the Nylo framework. It provides a lot of helpful actions to speed up development.


Install

Mac guide

  1. Open your bash_profile
sudo open ~/.bash_profile

  1. Add this alias to your bash_profile

    ...
alias metro='flutter pub run nylo_framework:main'

  2. Then run the following

    source ~/.bash_profile

If you open a project that uses Nylo, try to run the following in the terminal.

metro

You should get an output similar to the below.

Metro - Nylo\'s Companion to Build Flutter apps by Anthony Gordon
Version: 1.0.0

Usage: 
    command [options] [arguments]

Options
    -h

All commands:
 make
  make:controller
  make:model
  make:page
  make:stateless_widget
  make:stateful_widget

 appicons
  appicons:build

 apispec
  apispec:build


Make controller

You can make a new controller by running the below in the terminal.

metro make:controller profile_controller

This is will create a new controller if it doesn't exist within the app/controllers directory.


Make model

You can make a new model by running the below in the terminal.

metro make:model product

This is will create a new model if it doesn't exist within the app/models directory.

metro make:model product --storable

You can also make a Storable model which can be saved to the users local storage.

Learn more on Storable models here


Make page

You can make a new page by running the below in the terminal.

metro make:page product_page

This is will create a new page if it doesn't exist within the common/pages directory.

metro make:page product_page -c

Create a page with a controller.


Make stateless widget

You can make a new stateless widget by running the below in the terminal.

metro make:stateless_widget product_rating_widget

This is will create a new widget if it doesn't exist within the common/widgets directory.


Make stateful widget

You can make a new stateful widget by running the below in the terminal.

metro make:stateful_widget product_rating_widget

This is will create a new widget if it doesn't exist within the common/widgets directory.


What is an apispec?

The apispec.json file is used to auto-generate your models from APIs you've defined within the file. Running the metro apispec:build command will go through your apispec.json file and create your models for you and also include them within the api_service.dart file.

  1. Open your apispec.json file (this is located at the root of the project). 
    [
{
  "url":  "https://reqres.in/api/users?page=2",
  "method": "get",
  "headers": [],
  "model_name": "DemoUser",
  "model_type": "object",
  "data": {}
}
]
  2. Run metro apispec:build

This should create you a DemoUser in your app/models directory and also a method to retrieve the value in your api_service.dart file.


Auto generating your model classes

When you run the metro apispec:build command, it will attempt to create models from the JSON response into .dart files in your app/models directory. You can specify the name of the model in your apispec.json file.

{info} The endpoint returning the JSON should not contain null value types as this prevents the generator knowing what object type it is.

Nylo will support most endpoints returning a JSON response type like the below.

{"page":2,"per_page":6,"total":12,"total_pages":2,"data":[{"id":7,"email":"michael.lawson@reqres.in","first_name":"Michael","last_name":"Lawson","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg"},{"id":8,"email":"lindsay.ferguson@reqres.in","first_name":"Lindsay","last_name":"Ferguson","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg"},{"id":9,"email":"tobias.funke@reqres.in","first_name":"Tobias","last_name":"Funke","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/vivekprvr/128.jpg"},{"id":10,"email":"byron.fields@reqres.in","first_name":"Byron","last_name":"Fields","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/russoedu/128.jpg"},{"id":11,"email":"george.edwards@reqres.in","first_name":"George","last_name":"Edwards","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/mrmoiree/128.jpg"},{"id":12,"email":"rachel.howell@reqres.in","first_name":"Rachel","last_name":"Howell","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/hebertialmeida/128.jpg"}],"ad":{"company":"StatusCode Weekly","url":"http://statuscode.org/","text":"A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."}}


Apispec configuration

Each endpoint you want to auto-generate a model for will need to be configured in the apispec.json to create the model. If your endpoints require authentication, you can also include headers e.g. for a bearer token or authorization keys.

key type value
url String This is the url for the API endpoint, the response should return json
method String Specify here the request type e.g. post, get, put or delete
headers List\<Map\<String, String>> Accepts the key and value for your headers like Bearer tokens and more
model_name String Provide the name for the model once it's created in your app/models directory
model_type String If the endpoint returns a list (array) of objects set this to list.
If it returns an object use object
data Map\<String, String> Used for posting data to an endpoint.


Building the Apispec

Once you have configured your apispec.json file you can run the below to trigger the build.

metro apispec:build


Building app icons

You can generate all the app icons for IOS and Android by running the below command.

metro appicons:build

This uses the pubspec.yaml configuration for your app icon. Check out the next section which explains how you can update your app icon in more detail.