# Flutter

## Instalção
### Sdk do Flutter
1. Vá em [flutter](https://docs.flutter.dev/get-started/install/windows) e instale a sdk(software development kit) do flutter.
2. O arquivo estará zippado, então extraia o conteúdo e tenha cuidado para não coloca-lo em uma pasta privada.
3. Agora, clique em windows e pesquise por "**Editar variáveis**" de ambiente 
4. Ao clicar, abrirá essa tela
5. Vá em variáveis de ambiente
6. Ao clicar, abrirá essa tela:
7. Clique 2 vezes em Path
8. Clique em novo e adicione o local(caminho) do arquivo bin da pasta do flutter:



9. Clique em ok nas 3 janelas.
### Android Studio
1. Agora, vá em [Android Studio](https://developer.android.com/studio) e clique em Download Android Studio e depois concorde com os termos
2. Abra o instalador do Android Studio 
3. Next>Next>(Selecione o diretório)Next>Install>(Ao terminar)Next>Finish
4. Abrirá essa janela, clique em ok:
5. Ao abrir essa janela, clique em Next>Next>Next>Next:
6. Clique em accept nas 3 abas e depois em finish
7. Se aparecerem perguntas sobre prompt, aceite e depois que carregar, clique em finish.
8. Com o android studio instalado, o programa irá abrir essa. Clique em plugins
9. Pesquise por flutter e clique em install
10. Clique em restart IDE
11. Agora, terá a opção de criar um novo projeto em flutter
12. Ao clicar nessa opção, abrirá essa janela, clique em Flutter
13. Cole o path da sdk do flutter baixada. Lembre-se que o path a ser copiado é o da pasta flutter e não o da bin.



14. Feito isso, vá em Next. Abrirá essa janela:

15. Aqui, você poderá mexer em algumas configurações da sua aplicação. Em geral, não mexa em project type, em android language, em I0S language. Configurado como quiser, vá em create.
16. Ao seu projeto ser criado, se aparecer isso, permita:
### Adicionando Dispositivo Emulado
1. Para ciar um dispositivo, vá em Device Maneger aqui:
2. Vá em Create Device:
3. Em geral, selecionar um dispositivo antigo/pequeno e o sistema mais atualizado é a melhor opção.

### Adicionando Celular Físico
1. No seu dispositivo, libere o modo de desenvolvedor, em geral, você pode fazer isso indo em "Configurações"->"Sobre o Telefone"->"Informações do Software". Ao entrar nessa página, clique várias vezes no "Número de Compilação"

![image alt](https://hackmd.io/_uploads/HJlAnBs02.png"abc" =250x450)

![image alt](https://hackmd.io/_uploads/SJ0YaSj0h.png"abc" =250x500)

![image alt](https://hackmd.io/_uploads/ByMv0HoCn.png"abc" =250x500)

2. Agora que o modo desenvolvedor foi ativado, entre nele e ligue a DEPURAÇÃO USB
![image alt](https://hackmd.io/_uploads/SJOEyLiC2.png"abc" =250x500)

![image alt](https://hackmd.io/_uploads/rkbOJLoA3.png"abc" =250x500)

3. Agora, conecte o seu dispositivo ao computador com o USB. Deverá aparecer essa mensagem no seu celular:
![image alt](https://hackmd.io/_uploads/BkcymIsAh.jpg"abc" =250x500)
4. E deverá aparecer aqui no seu android studio:

#### Se o passo 3 ou 4 não estiverem aparecendo
Pode ser que o seu computador não tenha o driver usb do seu dispositivo, procure pelo driver usb do seu modelo de celular e instale. Logo após isso deverá funcionar.

### VS Code
#### Poderíamos programar o nosso projeto pelo próprio Android Studio, mas, em geral, na equipe usamos o VS Code pois possuir mais praticidade e funcionalidades.

1. Busque pela extensão do flutter no seu VS Code e instale. Essa extensão instala o dart junto, então se pedir para instalar o dart, aceite.
2. Tem como criar o seu projeto em flutter pelo próprio VS Code mas é melhor criar no android studio e codar pelo VS Code é mais eficiente porque no android studio você pode selecionar algumas coisas a mais. Mas para criar o seu projeto no VS Code, clique em F1 no seu teclado e digite "Flutter: New Project"

3. Com o seu projeto aberto/ criado, provavelmente aparecerá uma janela no canto inferior direito dizendo "run pubget" aceite. Muitas vezes o seu código estará dando um monte de erros sem muito sentido e só de dar o run pubget já resolve.

4. Para rodar o seu código pelo VS Code, vá na main do seu projeto e clique nesta seta:
5. Pedirá para selecionar um dispositivo e aí aparecerá como opção o dispositivo criado lá no android studio ou, se estiver conectado, o seu dispositivo físico. Selecione e, se não rodar automaticamente, clique no Start Debug(setinha da etapa 4) novamente.
6. Espere até rodar no seu dispositivo:

7. Uma das vantagens do flutter é o hot reload. Uma vez que você deu o start debug e carregou, abrirá essa janelinha:

8. Sempre que você fizer uma mudança e quiser o ficou, clique na seta verde ou dê um Ctrl+S+F5 que irá aparecer no seu dispositivo rapidamente.
9. Há um comando chamado flutter doctor, que deve ser rodado no terminal e que é muito utilizado para saber se têm algum erro de instalação/configuração que impedirá o seu código de funcionar da maneira correta:

10. Se, ao rodar o código, estiver parado por um tempo absurdo em "Running Gradle task 'assembleDebug'..." tente rodar as seguintes linhas no terminal:

cd android

depois

./gradlew clean

depois

./gradlew build


11. Finalmente, para gerar um APK de fato, vá no terminal e dê um:

flutter build apk

Esse comando gerará um arquivo chamado "apk-release.apk" que estará em build\app\outputs\apk\release
Pegue esse arquivo e envie para o seu celular e pronto, agora você terá o apk, é só instalar e usar.

## Codando em Flutter
<details><Summary><b><font size = "5">Aula1</font></b></Summary>

- Arquivos com nome de plataforma não serão mexidos, a programação não é neles.

- lib: aqui estão os códigos onde programaremos, aqui e no arquivo teste ficarão os arquivos .dart

- pubspec.yaml: Gerenciador de pacotes. Aqui ficam as informações do flutter que usaremos no nosso projeto
</details>

---
<details><Summary><b><font size = "5">Aula2</font></b></Summary>

- O Dart possui hot reload(ao mudar no código, muda no dispositivo de debug) é só salvar(ctrl+s).
</details>

---

<details><Summary><b><font size = "5">Aula3</font></b></Summary>

- Para um app funcionar, deve haver um método main:
~~~c
main(){
}
~~~

- Dentro do escopo desse método main, é necessário um método chamado runApp, para que a tela seja exibida
~~~c
runApp()
~~~

- Como parâmetro do runApp, deve ser passado um widiget para o flutter rodar.
- Acesse mais informações em:https://docs.flutter.dev/ui/widgets/basics

- Depois da chamada de um método, deve-se colocar ";"
- Nessa aula usaremos os widgets:
- Container()
- Text()
- Center()
- Os parâmetros passados nos widgets podem ser melhor vizualizados ao passar o mouse por cima dos widgets
- Os parâmetros dos widgets podem ser atrelados a outros widgets, como o "child: widget" ou o style: TextStyle()
</details>

---

<details><Summary><b><font size = "5">Aula4</font></b></Summary>

- Há dois tipos de estado o estado global e o estado local. O estado global é como se fosse a moldura, a forma. O estado local é o mais interno, é o que é alterado.
- Na nossa aplicação, o estado global seria o container e o estado local seria o text.
- Os widgets são classes e há dois tipos de widgets:
- statelass(não haverá alterações)
- statefull(haverá alterações)

- Criaremos nessa aula um widget stateless.
- Para criar um widget, criamos uma classe
- Para passar o estado, usamos um extends
- Agora, falta o método build. O método build é uma espécie de método construtor. Esse método retornará a forma que você quer que seu widget possua.
- O método build serve mais especificamente para cosntruir a árvore de widgets que representará o nosso widget:

- Agora, temos um widget que faz a mesma coisa que o nosso Center inicial lá.

- Para criarmos um parâmetro para o nosso wigdet, utilizamos um "final tipo variavel":
- Agora, precisamos de um construtor para cada variável que criamos para virar parâmetro:
- E por fim, a nossa aplicação agora fica assim:
</details>

---
<details><Summary><b><font size = "5">Aula5(MaterialApp)</font></b></Summary>

- Podemos colocar o nosso widget dentro de um widget chamado materialApp. Esse widget dá uma cara a mais de aplicativo para a nossa aplicação.
- A forma mais simples de fazer isso é colocar a nossa classe como child do materialapp na hora de retornar o seu estado.
- No materialapp, o texto(text) não precisa ter direção passada.


- O Materialapp possui vários parâmetros. Lembre-se que o prarâmetro home é o widget que representará o seu app.

</details>

---

<details><Summary><b><font size = "5">Aula6(StatefulWidget)</font></b></Summary>

- Como dito antes, um widget stateful apresenta mudança.
- Para criar um widget stateful precisaremos de duas classes.
- A primeira deverá ter um "extends Stateful"
- Isso irá fazer com que a gente crie um cosntrutor diferente do build, mas também pode ser criado pela lâmpadazinha.
- Além disso, ela deverá retornar a segunda classe.

- A segunda classe deverá ter um "extends State<...>" e nesses 3 pontinhos deverá ser passado o nome da primeira classe sem parenteses. O construtor dessa classe será um build e no return deveá ser passado o widget a ser criado.
- Ao passar esse StatefulWidget, a classe ao ser passada deve ser a primeira.

- A vantgem de usar um StatefulWidget é poder usar um método de atualização chamado setSate:
setState(() {});
- Ao mandar esse setState em um onpressed de botão, por exemplo, toda vez que a gente clica ele atualiza a tela.
- A gente também manda iterar 1 no contador nesse onpressed e resulta nisso:

- Note que o StatefulWidget foi passado na home de um MaterialApp de um StatelessWidget, e essa widget sem estado que é chamado no runApp da main.

</details>

---

<details><Summary><b><font size = "5">Aula7(Scaffold)</font></b></Summary>

- Scaffold é um widget, assim como o MaterialApp, que dá mais cara de app a sua aplicação.

- O Scaffold deve ir dentro do MaterialApp e possui alguns parâmetros muito interessantes como:

- appbar(barra horizontal que fica na parte de cima)

- body(corpo do widget)


</details>

---

<details><Summary><b><font size = "5">Aula8(AnimatedBuilder)</font></b></Summary>

- Como vimos, o SetState é capaz de atualizar as coisas que estão dentro do Estate, que por consequência são as coisas que vão no parâmetro home do MaterialApp. Contudo, e se quisessemos mudar algo fora desse escopo? Como por exemplo o tema, que é um outro parâmetro do MaterialApp.

- Para isso, criamos uma classe que herda de ChangeNotifier. Como vamos utilizar um switch para a mudança de tema, essa classe terá um atributo que servirá de interruptor para o switch e um método que servirá para a trocar o valor do interruptor toda vez que ele é chamado.


- Ao final desse método, colocamos um NotfieListeners() para avisar a quem for escutar que o evento de troca ocorreu.

- Agora, criaremos uma instância de uma forma mais simples, que é usando um static. Isso permetirá que não precisemos criar uma instancia em outro lugar e sim direto na classe.

- AnimetedBuilder é uma classe que é utilizada para animar as coisas na tela, mas além disso, ela também rebuilda as coisas da tela. Utilizaremos dessa qualidade dela para rebuildar a tela com o novo tema toda vez que ela escutar algo específico.

- Para o rebuild, essa classe precisa receber um parâmetro chamado animation, onde botaremos o gatilho para a mudança.

- Na nossa ocasião, colocamos esse gatilho na classe com o ChangeNotifier ao usarmos o NotifieListeners().

- Então, passaremos um objeto dessa classe nesse prâmetro.

- Além do animation, essa classe também recebe o parâmetro build.

- Esse parâmtro recebe uma função "instantânea" que recebe como parâmtetro context e child.

- Dentro do escopo da função, retornaremos o nosso MaterialApp.

- Agora, note que não precisamos mais do SetState, então no switch só colocaremos ele para chamar a mudarTema toda vez que ele é acionado e voilá

</details>

---

<details><Summary><b><font size = "5">Aula9(Column e Row)</font></b></Summary>

- Esses wigets criam colunas e linhas, respectivamente.

-

-

-

</details>

---