# Apostila Flutter

https://medium.com/sysvale/instalando-o-flutter-no-windows-7d19cfdae1b8
## Instalando o Flutter no Windows

Flutter é um SDK open-source da Google para o desenvolvimento de aplicativos nativos para iOS e Android, sendo também o principal método de criação de apps para o Google Fuchsia (sistema operacional em desenvolvimento pela empresa).
Neste artigo, veremos o passo a passo da instalação do Flutter no Windows, para que possamos começar a construir nossos próprios apps.

## Instalando o SDK
1º passo: Baixe o SDK do Flutter e extraia-o.
disclaimer: No momento da escrita desse artigo (09/03/2019), o Flutter estava na versão 1.2. Caso haja uma nova versão, acesse esse link para obter a versão mais recente, ou esse outro link para ter acesso à todas as versões disponíveis para download.

2º passo: extraia o arquivo baixado e coloque a pasta “flutter” no diretório desejado, ex.: C:\src\flutter. A documentação desaconselha instalar o Flutter em um diretório como C:\Program Files\ para evitar problemas com falta de permissão.

Após esse passo, já é possível acessar o comando flutter e todos os comandos disponíveis a partir do arquivo “flutter_console.bat”. Entretanto, para maior conveniência, é possível ter acesso ao Flutter à partir de qualquer terminal ou prompt de comando, adicionando o Flutter à variável PATH do seu sistema.

3º passo: Adicione o Flutter à variável PATH do sistema. Para tal, copie o caminho até o diretório \bin, existente na pasta “flutter”. No Windows Explorer, clique com o botão direito em “Este computador” e acesse a opção “Propriedades”. Em seguida vá em “Configurações avançadas do sistema” → “Variáveis de ambiente”. No text field “Variáveis de usuário”, clique na variável PATH → “Novo”, e cole o caminho para o diretório \bin.

Agora o Flutter já pode ser acessado diretamente do prompt de comando ou outro terminal.

## Instalando dependências
Agora que o SDK está instalado e o Flutter foi adicionado à variável de ambiente PATH, é possível utilizar o comando flutter doctor fora do “flutter_console.bat”.

O flutter doctor é o comando responsável por verificar se existem dependências do Flutter a serem instaladas. Além disso, ele retorna um relatório (Doctor Summary) sobre o status da instalação contendo as dependências que faltam, como instalá-las, problemas encontrados e como resolvê-los.

## Testando a instalação
Para testarmos a instalação, vamos criar um projeto, compilá-lo e executá-lo. Para tanto, assegure que há um dispositivo conectado ao computador, e que as opções de desenvolvedor foram ativadas nele . Em seguida, digite o comando flutter create <nome_do_seu_projeto>, para criar um novo projeto, e entre na pasta criada.

Por fim, execute flutter run dentro dessa pasta, e aceite a instalação no seu dispositivo para que seja possível compilar e executar o projeto da imagem abaixo, criado como demonstração pela equipe do Flutter.

## Comandos úteis do Flutter para ter sempre à mão:
|Comando|Descrição|
|--|--|
|flutter create |cria um novo projeto com toda a estrutura padrão de pastas, código boilerplate e testes.|
|flutter run | compila e dá build em um determinado projeto.|
|flutter run -d <id do dispositivo>| compila e dá build em um determinado projeto tendo como alvo um dispositivo específico.|
|flutter install | instala um projeto Flutter no dispositivo conectado.|
|flutter packages get | adiciona dependências ao projeto.|
|flutter test | executa teste unitário.|
|flutter doctor | mostra informações sobre o processo de instalação do Flutter.|
|flutter devices | lista todos os dispositivos conectados, com informações como: nome do dispositivo, id do dispositivo e versão do Android |
|s | realiza uma captura de tela do aplicativo em execução e a armazena na pasta do projeto.|
|r | realiza hot reload do projeto.|
|R | realiza hot restart do projeto.|
|q | encerra o projeto.|
|flutter help |lista estes e todos os outros comandos disponíveis para serem executados com Flutter.|
|Flutter emulators | lista os emuladores existentes|
|Flutter emulators --launch nome_do_emulador| para rodar um emulador existente|
|CTRL + F5 | Para mostrar no Visual Code os emuladores disponiveis|

## Widgets! Explorando um aplicativo Flutter
Tudo no Flutter é um Widget. Seja uma página, um botão ou um texto. Sempre que quisermos exibir qualquer tipo de elemento para o usuário, usaremos Widgets.

O Flutter fornece diversos Widgets que são essenciais para o funcionamento da nossa aplicação. Por isso, no arquivo main.dart onde podemos encontrar todos os elementos do nosso aplicativo de exemplo, logo na primeira linha, encontramos a importação dos Widgets do Material Design:

import 'package:flutter/material.dart';

Mais abaixo encontramos o Widget superior da aplicação. É nele, chamado de MyApp, que seremos capazes de definir um esquema de cores padrão, bem como o título e a página inicial do nosso aplicativo. Perceba também que a função main, a “porta de entrada” cria uma instância desse Widget, iniciando o aplicativo:

void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

Repare que na linha 9, no parâmetro primarySwatch do construtor da classe ThemeData, passamos o valor Colors.blue. A classe Colors é fornecida pelo Flutter Material, onde encontramos diversas cores comumente utilizadas pelo Material Design. Que tal mudarmos a cor primária do nosso aplicativo para vermelho?

ThemeData(
       primarySwatch: Colors.red,
),

Mais abaixo encontraremos outras duas classes: MyHomePage e _MyHomePageState. Diferentemente do Widget superior da aplicação, que se tratava de um StatelessWidget (um Widget que não armazena dados), o Widget da nossa página inicial se trata de um StatefulWidget (um Widget que armazena dados e possui Lifecycle). Por isso possuímos duas classes: a primeira, chamada MyHomePage, conterá apenas os dados imutáveis do nosso Widget, ou seja, apenas os dados que forem passados como parâmetro para o Widget. É essa classe que instanciamos dentro do Widget MyApp para abrir a página inicial.

class MyHomePage extends StatefulWidget {
 MyHomePage({Key key, this.title}) : super(key: key);
 final String title;
 
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

A segunda classe, _MyHomePageState, é onde armazenamos os dados mutáveis do componente (estado) e implementamos o método build utilizado pelo Flutter para criar o Widget na tela do usuário:

class _MyHomePageState extends State<MyHomePage> {
 int _counter = 0;
 
 void _incrementCounter() {
   setState(() {
     _counter++;
   });
 }
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'You have pushed the button this many times:',
           ),
           Text(
             '$_counter',
             style: Theme.of(context).textTheme.display1,
           ),
         ],
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: _incrementCounter,
       tooltip: 'Increment',
       child: Icon(Icons.add),
     ),
   );
 }
}

Perceba que é nesse Widget que encontramos todo o código da nossa aplicação responsável por exibir o contador e, ao clique do botão de incremento, realizamos a atualização dos dados. Agora que alteramos a cor do nosso aplicativo, que tal implementar mais uma funcionalidade? Apenas um botão de incremento não é suficiente, também precisamos decrementar!

Ainda na classe _MyHomePageState criaremos mais um método chamado _decrementCounter. Este método ficará responsável por decrementar o atributo _counter da nossa aplicação e por executar o método setState disponível em todo Widget do tipo Stateful:

...
void _decrementCounter() {
   setState(() {
     _counter--;
   });
 }
...

Por fim precisaremos, no atributo floatingActionButton do Widget Scaffold, adicionar mais um botão ao lado do botão de incremento. Faremos isso agrupando ambos os botões no Widget Row, também disponibilizado pelo Flutter:

floatingActionButton: Row(
       mainAxisAlignment: MainAxisAlignment.end,
       children: <Widget>[
         FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: Icon(Icons.add),
         ),
         SizedBox(
           width: 10.0,
         ),
         FloatingActionButton(
           onPressed: _decrementCounter,
           tooltip: 'Decrement',
           child: Icon(Icons.remove),
         ),
       ],
     ),

Salve as alterações e agora conseguimos mudar a cor de tema da aplicação, adicionando uma nova funcionalidade em alguns poucos passos.

###### tags: `flutter` `apostila`