FLUTTER

Aula 1: O framework do Flutter

COMEÇAR A AULA 1
Construindo aplicativos nativos com o Flutter

Guia eficaz de DART

https://dart.dev/guides/language/effective-dart
Dicas sobre DART
https://dart.dev/guides/language/language-tour
Perguntas frequentes do Flutter
https://flutter.io/faq/

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-
0c04-4d98-b47f-c884b9cd5a3b/concepts/35329ea0-ef26-4edf-
bb85-5d2e9667eed5
2. Por que usar FLUTTER.

3. Por que usar DART.

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-
b47f-c884b9cd5a3b/concepts/274ebd5a-df69-406b-8fed-fbe6b9f85d2e
ou
https://youtu.be/9q4SnR3LLy4

4. Montando seu ambiente

Você pode montar seu ambiente de desenvolvimento e configurar seu
emulador/dispositivo seguindo as instruções em
https://flutter.io/setup/ e https://developer.android.com/studio/run/managing-
avds.html (conteúdo em inglês).
Nota: utilizamos o Android Studio 3 e o Android SDK mais recente na época da
gravação, mas você pode usar qualquer emulador (ou dispositivo físico
habilitado para o desenvolvedor) que quiser, incluindo o iOS Simulator caso
esteja usando um Mac.
Se encontrar algum problema, tente depurá-lo dando uma olhada em nossos
problemas no GitHub, na tag #flutter do StackOverflow e no Gitter. Você também
pode registrar um problema ou fazer uma pergunta.
Documentação: https://docs.flutter.io/
Github: https://github.com/flutter/flutter
StackOverflow: https://stackoverflow.com/questions/tagged/flutter
Gitter: https://gitter.im/flutter/flutter
(conteúdo em inglês)

Obrigatório instalar o ANDROID SDK

Adicionar o plugin FLUTTER e DART no Android Studio.

5. e 6. Criando um aplicativo com Flutter

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-
b47f-c884b9cd5a3b/concepts/d5a36407-d16b-47f5-9462-e52e466c8e93
ou
https://youtu.be/QWUIVd1pZ7w

Neste exercício, você vai criar seu primeiro aplicativo com o Flutter!

Metas

Verificar se você configurou o Android Studio.

Verificar se o plug-in do Flutter foi instalado.
Rodar o aplicativo!

Passos

Crie um aplicativo. Faça isso usando o flutter create hello_rectangle na linha

de comando ou acessando File -> New -> New Flutter Project.
Exclua o conteúdo em lib/main.dart de seu aplicativo.
 Cole o código de lib/main.dart do aplicativo HelloRectangle nolib/main.dart` de
seu aplicativo.
Código do hello_rectangle para colar no MAIN.DART.
// Copyright 2018 The Chromium Authors. All rights reserved.

// Use of this source code is governed by a BSD-style license that can be

// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() {

runApp(

MaterialApp(

debugShowCheckedModeBanner: false,

title: 'Hello Rectangle',

home: Scaffold(

appBar: AppBar(

title: Text('Hello Rectangle'),

),

body: HelloRectangle(),

),

),
);

class HelloRectangle extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Center(

child: Container(

color: Colors.greenAccent,

height: 400.0,

width: 300.0,

child: Center(

child: Text(

'Hello!',

style: TextStyle(fontSize: 40.0),

textAlign: TextAlign.center,

),

),

),

);
}

Abra o dispositivo ou o emulador e compile e inicialize o aplicativo. Você pode

fazer isso usando o botão verde de “reproduzir” no Android Studio. Na linha de
comando, você pode executar flutter run dentro da pasta do projeto de seu
aplicativo.

Especificações

O aplicativo deve ter um título.

A barra do aplicativo deve ter um título.
O retângulo colorido deve estar centralizado no aplicativo.
O texto deve estar centralizado no widget Container e alinhado no centro.

Veja as capturas de tela de como fica o aplicativo finalizado aqui.

7. Estrutura reativa do Flutter
https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-
b47f-c884b9cd5a3b/concepts/bb4c8ab6-ee61-4f99-bcf8-7f6d9c7d81f0
ou
https://youtu.be/LZsb7gnawqA

8. Ferramentas de desenvolvimento do Flutter

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-
b47f-c884b9cd5a3b/concepts/8a1f8062-df57-49f0-9c25-3751da440647

Ou
https://youtu.be/ZwN7stRkwFs
Recursos (em inglês)

 Recarregamento expresso
 Inspetor do Flutter
 Guia de estilo de Dart
 Observatório de Dart

9. A beleza dos widgets

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-
b47f-c884b9cd5a3b/concepts/27ab8a0b-f8ef-4e8a-bb7a-3cc688bf9f9d

ou

https://youtu.be/OqR_Y1m-6xo

10. Quiz: Explorando os widgets do Flutter

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-
b47f-c884b9cd5a3b/concepts/61c7665b-1214-418c-ab55-394a62010b73

Existem inúmeros widgets disponíveis, e é importante se familiarizar com eles

para saber o que usar ao desenvolver um aplicativo. Você pode lembrar de
alguns — Container, Row, Column — mas há diversos outros muito úteis, que já
estão pré-desenvolvidos. Assim, você não vai precisar criá-los por conta própria.
Pense em usar Checkboxes, Dropdowns e TextFields!
Conhecer os vários widgets que o Flutter oferece é bem divertido, como uma
caça ao tesouro. Como o Flutter é constantemente atualizado, novos widgets e
parâmetros personalizados para cada um deles são criados a todo momento, e
você pode ver tudo isso em https://flutter.io/widgets. Se existir um widget que
você ache que possa melhorar, registre um problema ou faça melhorias você
mesmo!
11. Dissecando o Hello Rectangle
https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-
b47f-c884b9cd5a3b/concepts/27c6e185-a86d-49fa-b053-9f0d3876ef97

ou

https://youtu.be/2uGXgMi7P_o

Esse foi um resumo bem rápido de uma estrutura muito complexa, e eu sei que
você está se perguntando quando vai começar a desenvolver. Se algum dia você
tiver uma tarde livre e uma xícara de chá na mão, recomendo dar uma olhada
nos Materiais. Eles mostram discussões e vídeos mais profundos sobre Dart,
bibliotecas móveis, programação reativa, renderização, layout e muito mais.

Widgets do Flutter *
Perguntas frequentes do Flutter *
*conteúdo em inglês

****** Programa usado no projeto flutter_app

import 'package:flutter/material.dart';

class Hello_Rectangle extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.greenAccent,
height: 400.0,
width: 300.0,
child: Center(child: Text('Hello', style: TextStyle(fontSize: 40.0))),
),
);
}
}

void main() {
// print("Oiiiiiiiiiiiiiiiiii");
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: Text("Hello rectangle!")),
body: Hello_Rectangle(),
 ),
),
);
}

12. Criando seu próprio widget

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-
b47f-c884b9cd5a3b/concepts/c52a2cd1-f7d8-476b-abc2-85b891b9dd8f

ou

https://youtu.be/oC7eCgcP0ew

13. Quiz: Desenvolvendo código para seu próprio widget de

categoria

https://classroom.udacity.com/courses/ud905/lessons/92a39eec-0c04-4d98-
b47f-c884b9cd5a3b/concepts/434cfc1b-b9d4-4ff9-a723-38b4e5cfaae4

Neste exercício, você vai finalizar a implementação do widget Category.

Para você não ter que adivinhar os tamanhos, use os seguintes dados:

 Altura do widget: 100.0

 Tamanho do ícone: 60.0
 Largura do ícone com fundo colorido: 70.0
 Tamanho do texto: 24.0

Metas

 Usando os widgets do Flutter que já existem, criar um widget Category

exclusivo.
 Personalizar o widget a seu gosto.

Passos
 1. Conclua os ToDos em category.dart e main.dart com base nas
especificações abaixo.
2. Personalize seu widget de categoria como quiser. Veja algumas ideias abaixo.

Especificações

 O ícone, a cor e o texto devem ser passados no widget de categoria após o

instanciamento. Esses parâmetros devem ser obrigatórios.
 A altura do widget deve ser de 100. Seu padding é de 8.0.
 O raio da borda do widget deve ser metade da altura (neste caso, 50). Você
pode definir a altura e o raio da borda como constantes.
 O tamanho do ícone deve ser 60. O padding ao redor do ícone deve ser 16.
 O texto deve ter tamanho 24.
 O InkWell não vai ter animação se a função onTap for nula. Use uma declaração
de exibição por enquanto, como um placeholder. Ou seja onTap: () {
print('I was tapped!'); }.
 As cores de realce e destaque de InkWell devem ser as que passarmos.

Clique aqui para ver o código inicial e capturas de tela.

Se não sabe como baixar um projeto no GitHub, veja as instruções no README
do curso.

Alguns containers:
ALIGN – Alinha seus filhos dentro
CENTER – Centraliza os filhos dentro.
GESTOR DETECTOR – Detecta gestos
FLEX – Mostra filhos em um array
PADDING – Insere espaços para formatação
STACK – Posiciona os filhos relativamente às bordas
MaterialAPP – Container principal.