# Installation

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

Três comandos levam você de uma pasta vazia a um aplicativo Flutter em execução, com roteamento, rede, temas e geração de código já configurados.

<div class="ny-doc-strip">
<span class="ny-doc-strip-label">Antes de começar</span>
<span class="ny-doc-strip-item">Flutter SDK instalado</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="/pt/docs/7.x/requirements">Requisitos completos →</a>
</div>

## Instalar

Execute estes comandos em ordem. É seguro executar cada um deles novamente.

<div class="ny-doc-steps">
<div class="ny-doc-step">
<span class="ny-doc-step-num">1</span>
<h3 class="ny-doc-step-title">Instale a CLI do Nylo globalmente</h3>

Coloca o comando `nylo` no seu sistema.

``` 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">Crie um novo projeto</h3>

Este comando clona o template do Nylo, configura o projeto com o nome do seu app e instala todas as dependencias automaticamente.

``` 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">Configure o alias do Metro</h3>

Isso configura o comando `metro` para o seu projeto, permitindo que voce use os comandos do Metro CLI sem a sintaxe completa `dart run`.

``` bash
cd my_app
nylo init
```

Reinicie o terminal depois, ou execute o comando `source` que o `nylo init` exibe.

</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>O que você recebe</span>
</div>
<div class="ny-doc-panel-body">
<div class="ny-doc-panel-grid">
<div class="ny-doc-panel-item">Roteamento e navegacao pre-configurados</div>
<div class="ny-doc-panel-item">Boilerplate de servico de API</div>
<div class="ny-doc-panel-item">Configuracao de tema e localizacao</div>
<div class="ny-doc-panel-item">Metro CLI para geracao de codigo</div>
</div>
</div>
</div>


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

## Executando o Projeto

Projetos Nylo rodam como qualquer app Flutter padrao.

<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
```

Se o build for bem-sucedido, o app exibira a tela inicial padrao do Nylo.

</div>

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

Abra a pasta do projeto, escolha um dispositivo no seletor de destino e pressione **Run**.

<a href="https://docs.flutter.dev/tools/android-studio#running-and-debugging" target="_BLANK">Documentação do Flutter: execução e depuração ↗</a>

</div>

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

Abra a pasta do projeto e execute **Debug: Start Without Debugging** na paleta de comandos.

<a href="https://docs.flutter.dev/tools/vs-code#run-app-without-breakpoints" target="_BLANK">Documentação do Flutter: executar sem pontos de interrupção ↗</a>

</div>

</div>


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

## Metro CLI

O Metro gera os arquivos do projeto para você. Execute-o sem argumentos para ver o menu ou chame um comando diretamente.

``` 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
```

### Referência de comandos

Cada comando recebe um nome, por exemplo, `metro make:page settings_page`

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Comandos de widgets</div>
<div class="ny-doc-command">
<code>metro make:page</code>
<span>Criar uma nova pagina</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateful_widget</code>
<span>Criar um widget stateful</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateless_widget</code>
<span>Criar um widget stateless</span>
</div>
<div class="ny-doc-command">
<code>metro make:state_managed_widget</code>
<span>Criar um widget com gerenciamento de estado</span>
</div>
<div class="ny-doc-command">
<code>metro make:navigation_hub</code>
<span>Criar um navigation hub (nav inferior)</span>
</div>
<div class="ny-doc-command">
<code>metro make:journey_widget</code>
<span>Criar um widget de jornada para navigation hub</span>
</div>
<div class="ny-doc-command">
<code>metro make:bottom_sheet_modal</code>
<span>Criar um modal bottom sheet</span>
</div>
<div class="ny-doc-command">
<code>metro make:button</code>
<span>Criar um widget de botao personalizado</span>
</div>
<div class="ny-doc-command">
<code>metro make:form</code>
<span>Criar um formulario com validacao</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Comandos auxiliares</div>
<div class="ny-doc-command">
<code>metro make:model</code>
<span>Criar uma classe modelo</span>
</div>
<div class="ny-doc-command">
<code>metro make:provider</code>
<span>Criar um provider</span>
</div>
<div class="ny-doc-command">
<code>metro make:api_service</code>
<span>Criar um servico de API</span>
</div>
<div class="ny-doc-command">
<code>metro make:controller</code>
<span>Criar um controller</span>
</div>
<div class="ny-doc-command">
<code>metro make:event</code>
<span>Criar um evento</span>
</div>
<div class="ny-doc-command">
<code>metro make:route_guard</code>
<span>Criar um route guard</span>
</div>
<div class="ny-doc-command">
<code>metro make:config</code>
<span>Criar um arquivo de configuracao</span>
</div>
<div class="ny-doc-command">
<code>metro make:interceptor</code>
<span>Criar um interceptor de rede</span>
</div>
<div class="ny-doc-command">
<code>metro make:command</code>
<span>Criar um comando Metro personalizado</span>
</div>
<div class="ny-doc-command">
<code>metro make:env</code>
<span>Gerar configuracao de ambiente a partir do .env</span>
</div>
</div>

### Exemplo de Uso

``` 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

<!-- uncertain: no established pt translation yet for the "Requires" strip label; using "Requer" -->
<div class="ny-doc-strip">
<span class="ny-doc-strip-label">Requer</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">Atualizar a CLI →</a>
</div>

O comando `nylo` da etapa 1 faz mais do que criar projetos. Execute-o a partir do diretório do seu projeto para limpar builds, atualizar os pods do iOS, rodar testes e verificar suas traduções.

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Comandos do projeto</div>
<div class="ny-doc-command">
<code>nylo new</code>
<span>Criar um novo projeto</span>
</div>
<div class="ny-doc-command">
<code>nylo init</code>
<span>Configurar o alias do metro no seu shell</span>
</div>
<div class="ny-doc-command">
<code>nylo clean</code>
<span>Executar flutter clean e flutter pub get</span>
</div>
<div class="ny-doc-command">
<code>nylo ios:pod-refresh</code>
<span>Reinstalar os pods do iOS</span>
</div>
<div class="ny-doc-command">
<code>nylo metro</code>
<span>Executar um comando do Metro sem o alias</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Testes e traduções</div>
<div class="ny-doc-command">
<code>nylo test</code>
<span>Formatar e rodar seus testes</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:find-untranslated</code>
<span>Encontrar textos que não estão em .tr()</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:check-missing-keys</code>
<span>Encontrar chaves ausentes nos seus arquivos de idioma</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">A própria CLI</div>
<div class="ny-doc-command">
<code>nylo self-update</code>
<span>Atualizar o nylo para a versão mais recente</span>
</div>
<div class="ny-doc-command">
<code>nylo --version</code>
<span>Mostrar a versão instalada</span>
</div>
</div>

Comandos que aceitam opções as listam com `-h`, por exemplo `nylo test -h`. Os testes são abordados em [Executando os Testes](/docs/7.x/testing#running-tests), e os comandos `locale:` em [Auditoria de Traduções](/docs/7.x/localization#auditing-translations).

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

### Limpando um projeto

`nylo clean` executa `flutter clean` e depois `flutter pub get`. Adicione uma flag de plataforma quando uma limpeza normal não for suficiente:

``` bash
# flutter clean e depois flutter pub get
nylo clean

# Também remove ios/Pods, ios/.symlinks e ios/Podfile.lock, depois executa pod install --repo-update
nylo clean --ios

# Também executa gradlew clean em android/
nylo clean --android

# Ambos os comandos acima
nylo clean --all
```

Se um projeto não tiver a pasta `ios/` ou `android/`, aquela plataforma é ignorada com um aviso. `pod install` só é executado no macOS.

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

### Atualizando os pods do iOS

Quando o CocoaPods fica dessincronizado, `nylo ios:pod-refresh` exclui `ios/Pods`, `ios/.symlinks` e `ios/Podfile.lock`, depois executa `pod install --repo-update` na pasta `ios/`:

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

Execute-o a partir da raiz do seu projeto no macOS. Diferente de `nylo clean --ios`, ele não executa `flutter clean` nem `flutter pub get`.

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

### Executando o Metro sem o alias

`nylo metro` repassa tudo o que vem depois dele para o Metro (`dart run nylo_framework:main`). Use-o antes de ter executado o `nylo init`, ou no Windows, onde o `nylo init` não consegue adicionar o alias `metro` para você:

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

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

### Atualizando a CLI

``` bash
nylo self-update
```

Isso verifica o pub.dev e reinstala o `nylo_installer` se uma versão mais recente estiver disponível. Depois que um comando termina, o `nylo` também avisa quando há uma atualização disponível. Ele fica em silêncio quando a saída não é exibida em um terminal, para que o aviso nunca apareça em logs de CI ou em saídas via pipe.

Para ver qual versão você tem instalada:

``` bash
nylo --version
```