# Installation

<div id="install"></div>

Three commands take you from an empty folder to a running Flutter app with routing, networking, themes and code generation already wired up.

<div class="ny-doc-strip">
<span class="ny-doc-strip-label">Before you start</span>
<span class="ny-doc-strip-item">Flutter SDK installed</span>
<span class="ny-doc-strip-dot"></span>
<span class="ny-doc-strip-item">Dart 3</span>
<span class="ny-doc-strip-dot"></span>
<a href="/docs/7.x/requirements">Full requirements →</a>
</div>

## Install

Run these in order. Each one is safe to re-run.

<div class="ny-doc-steps">
<div class="ny-doc-step">
<span class="ny-doc-step-num">1</span>
<h3 class="ny-doc-step-title">Install the Nylo CLI globally</h3>

Puts the `nylo` command on your system.

``` bash
dart pub global activate nylo_installer
```

</div>

<div class="ny-doc-step">
<span class="ny-doc-step-num">2</span>
<h3 class="ny-doc-step-title">Create a new project</h3>

Clones the Nylo template, renames it to your app, and installs dependencies.

``` bash
nylo new my_app
```

</div>

<div class="ny-doc-step">
<span class="ny-doc-step-num">3</span>
<h3 class="ny-doc-step-title">Set up the Metro alias</h3>

Lets you type `metro` instead of the full `dart run` syntax.

``` bash
cd my_app
nylo init
```

Restart your terminal afterwards, or run the `source` command that `nylo init` prints.

</div>
</div>

<div class="ny-doc-panel">
<div class="ny-doc-panel-head">
<img src="https://nylo.dev/images/nylo_logo.png" alt="" class="ny-mark h-[16px]">
<span>What you get</span>
</div>
<div class="ny-doc-panel-body">
<div class="ny-doc-panel-grid">
<div class="ny-doc-panel-item">Pre-configured routing and navigation</div>
<div class="ny-doc-panel-item">API service boilerplate</div>
<div class="ny-doc-panel-item">Theme and localization setup</div>
<div class="ny-doc-panel-item">Metro CLI for code generation</div>
</div>
</div>
</div>


<div id="running-the-project"></div>

## Running the Project

Nylo projects run like any standard Flutter app.

<div class="ny-doc-tabs" x-data="{ tab: 'Terminal' }">
<div class="ny-doc-tabbar" role="tablist">
<button type="button" role="tab" class="ny-doc-tab" @click="tab = 'Terminal'" :class="tab === 'Terminal' ? 'is-active' : ''" :aria-selected="tab === 'Terminal'">Terminal</button>
<button type="button" role="tab" class="ny-doc-tab" @click="tab = 'Android Studio'" :class="tab === 'Android Studio' ? 'is-active' : ''" :aria-selected="tab === 'Android Studio'">Android Studio</button>
<button type="button" role="tab" class="ny-doc-tab" @click="tab = 'VS Code'" :class="tab === 'VS Code' ? 'is-active' : ''" :aria-selected="tab === 'VS Code'">VS Code</button>
</div>

<div class="ny-doc-tabpanel" role="tabpanel" x-show="tab === 'Terminal'" x-cloak>

``` bash
flutter run
```

On a successful build the app opens on Nylo's default landing screen.

</div>

<div class="ny-doc-tabpanel" role="tabpanel" x-show="tab === 'Android Studio'" x-cloak>

Open the project folder, pick a device from the target selector, then press **Run**.

<a href="https://docs.flutter.dev/tools/android-studio#running-and-debugging" target="_BLANK">Flutter docs: running and debugging ↗</a>

</div>

<div class="ny-doc-tabpanel" role="tabpanel" x-show="tab === 'VS Code'" x-cloak>

Open the project folder, then run **Debug: Start Without Debugging** from the command palette.

<a href="https://docs.flutter.dev/tools/vs-code#run-app-without-breakpoints" target="_BLANK">Flutter docs: run app without breakpoints ↗</a>

</div>

</div>


<div id="metro-cli"></div>

## Metro CLI

Metro generates project files for you. Run it bare to see the menu, or call a command directly.

``` plaintext
$ metro

Metro - Nylo's Companion to Build Flutter apps by Anthony Gordon

Usage:
    command [options] [arguments]

Options
    -h

All commands:

[Widget Commands]
  make:page
  make:stateful_widget
  make:stateless_widget
  make:state_managed_widget
  make:navigation_hub
  make:journey_widget
  make:bottom_sheet_modal
  make:button
  make:form

[Helper Commands]
  make:model
  make:provider
  make:api_service
  make:controller
  make:event
  make:route_guard
  make:config
  make:interceptor
  make:command
  make:env
```

### Command reference

Every command takes a name, e.g. `metro make:page settings_page`

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Widget commands</div>
<div class="ny-doc-command">
<code>metro make:page</code>
<span>Create a new page</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateful_widget</code>
<span>Create a stateful widget</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateless_widget</code>
<span>Create a stateless widget</span>
</div>
<div class="ny-doc-command">
<code>metro make:state_managed_widget</code>
<span>Create a state-managed widget</span>
</div>
<div class="ny-doc-command">
<code>metro make:navigation_hub</code>
<span>Create a navigation hub (bottom nav)</span>
</div>
<div class="ny-doc-command">
<code>metro make:journey_widget</code>
<span>Create a journey widget for a navigation hub</span>
</div>
<div class="ny-doc-command">
<code>metro make:bottom_sheet_modal</code>
<span>Create a bottom sheet modal</span>
</div>
<div class="ny-doc-command">
<code>metro make:button</code>
<span>Create a custom button widget</span>
</div>
<div class="ny-doc-command">
<code>metro make:form</code>
<span>Create a form with validation</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Helper commands</div>
<div class="ny-doc-command">
<code>metro make:model</code>
<span>Create a model class</span>
</div>
<div class="ny-doc-command">
<code>metro make:provider</code>
<span>Create a provider</span>
</div>
<div class="ny-doc-command">
<code>metro make:api_service</code>
<span>Create an API service</span>
</div>
<div class="ny-doc-command">
<code>metro make:controller</code>
<span>Create a controller</span>
</div>
<div class="ny-doc-command">
<code>metro make:event</code>
<span>Create an event</span>
</div>
<div class="ny-doc-command">
<code>metro make:route_guard</code>
<span>Create a route guard</span>
</div>
<div class="ny-doc-command">
<code>metro make:config</code>
<span>Create a config file</span>
</div>
<div class="ny-doc-command">
<code>metro make:interceptor</code>
<span>Create a network interceptor</span>
</div>
<div class="ny-doc-command">
<code>metro make:command</code>
<span>Create a custom Metro command</span>
</div>
<div class="ny-doc-command">
<code>metro make:env</code>
<span>Generate environment config from .env</span>
</div>
</div>

### Example usage

``` bash
# Create a new page
metro make:page settings_page

# Create a model
metro make:model User

# Create an API service
metro make:api_service user_api_service
```


<div id="nylo-cli"></div>

## Nylo CLI

<div class="ny-doc-strip">
<span class="ny-doc-strip-label">Requires</span>
<span class="ny-doc-strip-item">nylo_installer 1.8.0+</span>
<span class="ny-doc-strip-dot"></span>
<a href="#nylo-self-update">Update the CLI →</a>
</div>

The `nylo` command from step 1 does more than create projects. Run it from your project directory to clean builds, refresh iOS pods, run tests, and check your translations.

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Project commands</div>
<div class="ny-doc-command">
<code>nylo new</code>
<span>Create a new project</span>
</div>
<div class="ny-doc-command">
<code>nylo init</code>
<span>Set up the metro alias in your shell</span>
</div>
<div class="ny-doc-command">
<code>nylo clean</code>
<span>Run flutter clean and flutter pub get</span>
</div>
<div class="ny-doc-command">
<code>nylo ios:pod-refresh</code>
<span>Reinstall your iOS pods</span>
</div>
<div class="ny-doc-command">
<code>nylo metro</code>
<span>Run a Metro command without the alias</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Testing and translations</div>
<div class="ny-doc-command">
<code>nylo test</code>
<span>Format and run your tests</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:find-untranslated</code>
<span>Find text that isn&#039;t wrapped in .tr()</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:check-missing-keys</code>
<span>Find keys missing from your lang files</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">The CLI itself</div>
<div class="ny-doc-command">
<code>nylo self-update</code>
<span>Update nylo to the latest version</span>
</div>
<div class="ny-doc-command">
<code>nylo --version</code>
<span>Show the installed version</span>
</div>
</div>

Commands that take options list them with `-h`, for example `nylo test -h`. Testing is covered in [Running Tests](/docs/7.x/testing#running-tests), and the `locale:` commands in [Auditing Translations](/docs/7.x/localization#auditing-translations).

<div id="nylo-clean"></div>

### Cleaning a project

`nylo clean` runs `flutter clean` and then `flutter pub get`. Add a platform flag when a normal clean isn't enough:

``` bash
# flutter clean, then flutter pub get
nylo clean

# Also remove ios/Pods, ios/.symlinks and ios/Podfile.lock, then run pod install --repo-update
nylo clean --ios

# Also run gradlew clean in android/
nylo clean --android

# Both of the above
nylo clean --all
```

If a project has no `ios/` or `android/` folder, that platform is skipped with a warning. `pod install` only runs on macOS.

<div id="nylo-ios-pod-refresh"></div>

### Refreshing iOS pods

When CocoaPods gets out of sync, `nylo ios:pod-refresh` deletes `ios/Pods`, `ios/.symlinks` and `ios/Podfile.lock`, then runs `pod install --repo-update` in the `ios/` folder:

``` bash
nylo ios:pod-refresh
```

Run it from your project root on macOS. Unlike `nylo clean --ios`, it doesn't run `flutter clean` or `flutter pub get`.

<div id="nylo-metro"></div>

### Running Metro without the alias

`nylo metro` passes everything after it to Metro (`dart run nylo_framework:main`). Use it before you've run `nylo init`, or on Windows, where `nylo init` can't add the `metro` alias for you:

``` bash
nylo metro make:page settings_page
nylo metro make:model User
```

<div id="nylo-self-update"></div>

### Updating the CLI

``` bash
nylo self-update
```

This checks pub.dev and reinstalls `nylo_installer` if a newer version is available. After a command finishes, `nylo` also tells you when an update is out. It stays quiet when the output isn't going to a terminal, so the notice never ends up in CI logs or piped reports.

To see which version you have installed:

``` bash
nylo --version
```
