Estrutura básica de aplicativos Flutter

Prévia do material em texto

Estrutura básica de aplicativos 
Flutter
Apresentação
O desenvolvimento de aplicações e sistemas para dispositivos móveis consiste em atividades e 
processos acerca do desenvolvimento de software para smartphones, tablets e PDAs, entre outros.
Flutter é um kit de ferramentas desenvolvido pela Google para facilitar a criação de aplicações 
móveis para múltiplas plataformas. Com ele, você poderá criar um código apenas e executá-lo em 
diversos ambientes: Android, iOS, web e até mesmo desktop.
Nesta Unidade de Aprendizagem, você vai aprender os passos de configuração do SDK do Flutter e 
como usar a ferramenta Android Studio para criar aplicações básicas. Além disso, também vai 
aprender a estrutura e os componentes de código principais de uma aplicação Flutter: os widgets.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Configurar um projeto de aplicativo móvel em Flutter e Dart.•
Definir a estrutura básica de um aplicativo Flutter.•
Explicar o funcionamento básico de widgets e leiautes.•
Desafio
Os widgets são os componentes principais que compõem as aplicações Flutter. Podem ser de dois 
tipos: stateless widgets, cujo conteúdo não se altera durante a execução; e stateful widgets, cujo 
conteúdo (estado) pode se alterar durante a utilização.
Tudo que compõe uma aplicação Flutter é um widget de um desses tipos, desde contêineres que 
organizam os leiautes da aplicação até controles básicos de interação do usuário, como campos de 
texto e botões.
Imagine a seguinte situação:
Desenvolva uma aplicação Flutter com dois campos de entrada para ler os valores de duas notas 
(N1 e N2) do usuário e um botão com o texto "Calcular Média".
Infográfico
Para criar um aplicativo Flutter, primeiro é preciso criar um projeto. Isso pode ser feito por meio do 
comando flutter create na linha de comando, ou utilizando uma ferramenta de desenvolvimento 
como o Android Studio. Um projeto de aplicativo Flutter é composto de diversos diretórios e 
arquivos.
Neste Infográfico, você vai compreender a estrutura de um projeto Flutter, explicando a finalidade 
de cada componente.
Aponte a câmera para o 
código e acesse o link do 
conteúdo ou clique no 
código para acessar.
https://statics-marketplace.plataforma.grupoa.education/sagah/6be4e328-bd23-4d45-96a8-a55e63e45173/dca0ad7f-6db0-410c-97b5-de5df568f422.jpg
Conteúdo do Livro
O Flutter foi desenvolvido para facilitar a criação de aplicações móveis. Ele se baseia na linguagem 
Dart e possibilita criar aplicações que podem ser executadas nativamente em diversas plataformas: 
Android, iOS, web e até mesmo desktop.
No capítulo Estrutura básica de aplicativos Flutter, base teórica desta Unidade de Aprendizagem, 
você vai aprender a desenvolver aplicações Flutter desde o processo de configuração de seu SDK, 
além de usar uma IDE para criar aplicações básicas. Por fim, vai entender a estrutura dessas 
aplicações e os widgets usados em sua implementação.
Boa leitura.
FUNDAMENTOS DE 
DESENVOLVIMENTO 
MOBILE
OBJETIVOS DE APRENDIZAGEM
 > Configurar um projeto de aplicativo móvel em Flutter e Dart.
 > Definir a estrutura básica de um aplicativo Flutter.
 > Explicar o funcionamento básico de widgets e leiautes.
Introdução
O Flutter é um conjunto de ferramentas desenvolvido pela Google para me-
lhorar o desenvolvimento e a experiência do usuário, com o objetivo principal 
de renderizar aplicativos com alto desempenho e construir aplicativos móveis 
nativos para Android e iOS a partir de uma única base de código.
Neste capítulo, você vai conferir como criar um projeto de aplicativo móvel 
Android utilizando o Flutter. Além disso, vai verificar como ocorre o processo 
de instalação e configuração das ferramentas necessárias. Por fim, você vai 
conhecer a estrutura básica de um aplicativo Flutter, bem como o funcionamento 
de alguns widgets e sua utilização para criar os aplicativos.
Criando um aplicativo móvel utilizando 
Flutter
Antes de utilizar as ferramentas do Flutter, precisamos realizar alguns pro-
cedimentos de instalação. Embora seja possível escrever o código utilizando 
qualquer editor simples de código, é interessante utilizar um ambiente inte-
Estrutura básica de 
aplicativos Flutter
Rafael Leal Martins
grado de desenvolvimento (IDE, integrated development environment) para 
facilitar a codificação. Para tanto, a ferramenta que utilizaremos aqui é o 
Android Studio. 
Inicialmente, vamos seguir o procedimento descrito na seção Get Started 
do site oficial do Flutter, como pode ser observado na Figura 1.
Figura 1. Opção Get Started no site do Flutter.
Fonte: Adaptada do site oficial do Flutter (GOOGLE, 2021b). 
O próximo passo é selecionar em qual sistema operacional o Flutter será 
instalado. Aqui, escolheremos a opção Windows, conforme a Figura 2.
Figura 2. Escolha do sistema operacional (OS) em que o Flutter será instalado.
Fonte: Adaptada do site oficial do Flutter (GOOGLE, 2021c). 
Estrutura básica de aplicativos Flutter2
Em seguida, você precisa baixar o Flutter SDK (software development kit), 
conforme a Figura 3.
Figura 3. Baixando o Flutter SDK.
Fonte: Adaptada do site oficial do Flutter (GOOGLE, 2021d).
Após baixar o SDK, descompacte o arquivo em alguma pasta do seu sistema 
operacional. A documentação não recomenda que pastas que requerem pri-
vilégios de acesso sejam escolhidas (p. ex., pasta C:\Arquivos de Programas).
Se quiser utilizar os comandos Flutter no console Windows, você 
precisa adicionar a pasta de arquivos binários do Flutter à variável 
de ambiente Path. A documentação do Flutter (FLUTTER..., [2021], documento 
on-line) indica os seguintes passos:
Na barra de pesquisa Iniciar, digite “env” e selecione Editar as variáveis de ambiente 
para sua conta. 
Em seguida, clique em Variáveis de Ambiente...
Em Variáveis do Usuário, verifique se há uma entrada chamada Path.
Se a entrada existir, insira o caminho completo para o subdiretório flutter/bin 
utilizando ; (ponto e vírgula) como separador dos valores existentes.
Se a entrada não existir, crie uma nova variável de usuário chamada Path com o 
caminho completo para o diretório flutter/bin como seu valor.
Você tem de fechar e reabrir quaisquer janelas de console existentes para que essas 
alterações entrem em vigor.
Fonte: Google (2021d, tradução nossa). 
Estrutura básica de aplicativos Flutter 3
Android Studio
Após instalar o Flutter SDK, é necessário instalar e configurar o Android 
Studio. Você pode baixá-lo no site Android Developers. Segundo o site oficial 
do Android Studio, (GUIA..., 2021, documento on-line): 
O Android Studio é o ambiente de desenvolvimento integrado (IDE, na sigla em 
inglês) oficial para o desenvolvimento de apps Android e é baseado no IntelliJ IDEA. 
Além do editor de código e das ferramentas de desenvolvedor avançadas do IntelliJ, 
o Android Studio oferece ainda mais recursos para aumentar sua produtividade 
na criação de apps Android.
Embora tenha sido originalmente criado para o desenvolvimento de apli-
cações Android, o Android Studio pode ser configurado para trabalhar com 
o desenvolvimento em Flutter. Contudo, o Flutter depende de uma instala-
ção completa do Android Studio para fornecer as suas dependências para a 
plataforma Android. Confira, a seguir, o passo a passo para essa instalação.
De acordo com a documentação oficial do Flutter (FLUTTER..., [2021]), 
deve-se completar o passo a passo a seguir para realizar a instalação 
completa do Android Studio.
1. Baixe e instale o Android Studio.
2. Inicie o Android Studio e execute Android Studio Setup Wizard. Com isso, você 
instalará as mais recentes ferramentas de linha de comando Android SDK, 
Android SDK e Android SDK Build-Tools, que são exigidas pelo Flutter para 
desenvolver para Android.
3. No terminal (Prompt de comando ou PowerShell), execute o comando flutter 
doctor para confirmar se o Flutter consegue localizar a sua instalação do 
Android Studio. Se tudo estiver correto, a saída daimagem a seguir deve ser 
exibida. (Observação: se o Flutter não conseguir localizar o Android Studio, 
execute o comando flutter config --android-studio-dir no terminal para definir o diretório no qual o Android Studio está 
instalado.)
Estrutura básica de aplicativos Flutter4
4. Dentro do Android Studio, abra a opção de gerenciamento de plugins (menu 
File > Settings > Plugins).
5. Selecione a opção Marketplace, pesquise pelo plugin Flutter e clique em Install.
Observe que o plugin Flutter também requisitará que o plugin Dart seja 
instalado. Após instalar o Flutter SDK e o Android Studio, confira, a seguir, 
como criar um projeto Flutter nessa ferramenta de desenvolvimento.
Criando um projeto Flutter no Android Studio
É possível criar um projeto para um novo aplicativo Flutter no Android Studio 
de várias formas, e uma delas é por meio da tela inicial do Android Studio. 
Na tela inicial, clique na opção Create New Flutter Project, conforme a Figura 4.
Estrutura básica de aplicativos Flutter 5
Figura 4. Criando um projeto Flutter na tela inicial do Android Studio.
Em seguida, selecione a opção Flutter Application, conforme a Figura 5. 
Figura 5. Selecionando a opção Flutter Application.
Estrutura básica de aplicativos Flutter6
Após selecionar essa opção, faz-se necessário definir os parâmetros do 
projeto, conforme a Figura 6. Deve-se definir um nome para o projeto (opção 
Project Name) e indicar a localização do Flutter SDK (Flutter SDK path) e do 
diretório do projeto (Project location). Também é possível definir uma descrição 
do projeto (Description). 
Figura 6. Definindo os parâmetros do projeto Flutter.
Por fim, para gerar o código para aplicativos nativos para as plataformas 
Android e iOS, deve-se definir um nome de pacote (Package name) e se deverá 
ser incluído suporte para código em Kotlin para Android e/ou Swift para iOS, 
conforme a Figura 7.
Estrutura básica de aplicativos Flutter 7
Figura 7. Definindo parâmetros específicos para códigos nativos.
Assim que esse processo for finalizado, será criado um aplicativo de 
exemplo (flutter_app), que será disponibilizado para edição. Na próxima 
seção, confira mais detalhes sobre a estrutura do projeto Flutter criado.
Entendendo a estrutura de um aplicativo 
Flutter
Como visto, ao criar um projeto Flutter, automaticamente é gerado o código 
para uma aplicação básica. Apesar de se tratar de um exemplo funcional bem 
interessante, idealmente esse não é o melhor código para iniciar o aprendizado 
desse framework. Vamos iniciar com um exemplo mais simples. 
Criando um (outro) primeiro aplicativo Flutter: 
Hello World
O código de um aplicativo Flutter é escrito na linguagem Dart. Segundo o site 
oficial da DART (GOOGLE, 2021a, documento on-line, tradução nossa):
Estrutura básica de aplicativos Flutter8
Dart é uma linguagem otimizada para o cliente para desenvolver aplicativos rápidos 
em qualquer plataforma. Seu objetivo é oferecer a linguagem de programação mais 
produtiva para o desenvolvimento de várias plataformas, emparelhada com uma 
plataforma de execução flexível para frameworks de aplicativos.
Dart é uma linguagem relativamente simples e muito flexível, con-
tando com centenas de bibliotecas para aumentar a sua funciona-
lidade. Confira, a seguir, um exemplo de programa em Dart (DART.DEV, 2021). 
Esse programa utiliza alguns recursos comuns aos aplicativos Dart:
//Isto é um comentário.
Um comentário de linha única. Dart também suporta comentários multilinha 
e de documentos. 
void
Um tipo especial que indica que um valor não é retornado ou utilizado. 
Funções como imprimirInteiro() e main(), que não retornam explicitamente 
um valor, têm o tipo de retorno void. 
int
Outro tipo de do, indicando um inteiro. Alguns tipos de dados adicionais 
são: String, List e bool.
42
Um número literal. Os números literais são uma espécie de constante de 
tempo de compilação.
print()
Estrutura básica de aplicativos Flutter 9
Comando de saída do console.
'...' (ou "...")
Um texto (String) literal.
$nomeVariável (ou ${expressão})
Interpolação de Strings: incluindo uma variável ou expressão em uma String.
main()
Função especial, obrigatória e de alto nível que inicia a execução do aplicativo. 
var
Uma maneira de declarar uma variável sem especificar o seu tipo. O tipo 
dessa variável (int) é determinado pelo seu valor atribuído (42).
Dart é uma linguagem segura para realizar a verificação de tipos estáticos, 
além de ser flexível, permitindo o uso de tipos dinâmicos combinados com veri-
ficações de tempo de execução, que podem ser úteis durante a experimentação 
ou para códigos que precisam ser especialmente dinâmicos.
A linguagem Dart oferece um recurso chamado null safety, que indica que os 
valores não podem ser nulos a menos que você diga que eles podem ser. Com isso, 
a Dart pode proteger a execução do código de exceções nulas (null exceptions). 
Para o nosso primeiro aplicativo, substitua o conteúdo do arquivo /lib/
main.dart pelo código mostrado a seguir:
import 'package:flutter/material.dart';
void main() => runApp(PrimeiroApp());
class PrimeiroApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Oi Flutter',
 home: Scaffold(
 appBar: AppBar(
 title: const Text('Oi Flutter'),
 ),
 body: const Center(
Estrutura básica de aplicativos Flutter10
 child: Text('Hello World'),
 ),
 ),
 );
 }
}
Fonte: Write... ([2021], documento on-line).
O código apresentado é de um aplicativo Flutter simples, intitulado Oi 
Flutter, que exibe a mensagem “Hello World” centralizada na tela do dispositivo 
móvel. Esse exemplo cria um aplicativo Material. Material é uma linguagem de 
design visual utilizada em aplicações para smartphones e na web. O Flutter 
oferece um rico conjunto de componentes que podem ser utilizados para 
compor o leiaute e o visual de um aplicativo. Em Flutter, esses componentes 
se chamam widgets, dos quais falaremos mais na próxima seção. 
O método main () usa a notação de seta (=>) para funções ou méto-
dos de uma linha. Aqui, ele chama o método runApp, que executa usando 
como argumento um objeto da classe PrimeiroApp, definida em seguida. 
O aplicativo é composto por um objeto da classe PrimeiroApp, que estende 
(herda) da classe StatelessWidget do Flutter. Isso faz do próprio aplicativo 
um widget. Em Flutter, quase tudo é widget, incluindo alinhamento, preen-
chimento e leiaute.
O widget Scaffold, da biblioteca Material, fornece uma estrutura de 
interface básica para o aplicativo: uma barra de aplicativo padrão (appBar) 
e uma propriedade body que contém a o conjunto de widgets aninhados para 
a tela inicial. Esse conjunto se organiza hierarquicamente em uma árvore. 
O principal trabalho de um widget é fornecer um método build(), que 
descreve como exibir o widget em termos de outros widgets de nível inferior. 
O body para esse exemplo consiste em um widget Center contendo um 
widget “filho” (child) Text, para exibir uma mensagem de texto. O widget 
Center alinha a sua subárvore de widgets ao centro da tela.
Widgets básicos e exemplos de sua 
utilização
Segundo o site oficial do Flutter (GOOGLE, 2021b), widgets Flutter são os 
componentes utilizados para construir a interface de usuário. Os widgets 
descrevem como eles devem ser exibidos na tela, além de sua configuração 
e estado atuais. Quando o estado de um widget muda, ele reconstrói a sua 
Estrutura básica de aplicativos Flutter 11
descrição. Em suma, construímos nossos aplicativos Flutter utilizando dos 
tipos de widgets, apresentados a seguir.
 � Widgets de leiaute: responsáveis por determinar a organização e o 
posicionamentos de outros widgets. Esses widgets servem para de-
limitar áreas nas telas dos dispositivos que serão preenchidas por 
outros widgets.
 � Widgets de interface: responsáveis por criar os componentes visuais 
que serão exibidos para os usuários. Eles determinam os componentesque irão compor a interface do aplicativo.
Como visto na seção anterior, a função runApp() no arquivo main.
dart pega o widget dado e o torna a raiz da árvore de widgets. Ao escrever 
um aplicativo, você geralmente cria outros widgets que são subclasses de 
StatelessWidget ou StatefulWidget, dependendo de se o widget está em 
estado estático ou dinâmico no aplicativo. Um StatelessWidget é utilizado 
quando o estado (conteúdo) do widget não é alterado durante a execução do 
aplicativo, ao passo que um StatefulWidget permite alterar o seu estado 
em tempo de execução.
Confira, a seguir, alguns dos widgets mais utilizados em aplicativos Flutter.
 � Text: O widget Text permite criar uma execução de texto estilizado 
dentro do aplicativo.
 � Row, Column: esses widgets flex permitem criar leiautes flexíveis nas 
direções horizontal (Row) e vertical (Column). O design desses objetos 
é baseado no modelo de leiaute flexbox da web.
 � Stack: em vez de ser orientado de modo linear (horizontal ou ver-
ticalmente), um widget Stack permite que você coloque os widgets 
em cima um do outro em ordem de renderização. Em seguida, você 
pode usar o widget posicionado como filhos (children) em uma pi-
lha e posicioná-los em relação à borda superior, direita, inferior ou 
esquerda da pilha. As pilhas são baseadas no modelo de leiaute de 
posicionamento absoluto da web.
 � Container: O widget Container permite criar um elemento visual 
retangular. Um Container pode ser formatado (decorado) com uma 
BoxDecoration como um fundo, uma borda ou uma sombra. Ele 
também pode ter margens, preenchimento e restrições aplicadas ao 
seu tamanho. 
Estrutura básica de aplicativos Flutter12
Confira, a seguir, mais um exemplo de aplicativo Flutter que utiliza esses 
widgets.
O código a seguir deve ser inserido no arquivo main.dart de um 
projeto Flutter:
import 'package:flutter/material.dart';
void main() {
 runApp(
 const MaterialApp(
 title: 'App 02', 
 home: SafeArea (
 child: MeuScaffold(),
 ),
 ),
 );
}
class MeuScaffold extends StatelessWidget {
 const MeuScaffold({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
 return Material(
 child: Column(
 children: [
 MeuAppBar(
 title: Text(
 'Segundo App',
 style: Theme.of(context) 
 .primaryTextTheme
 .headline6,
 ),
 ),
Estrutura básica de aplicativos Flutter 13
 const Expanded(
 child: Center(
 child: Text('Outro app em Flutter!'),
 ),
 ),
 ],
 ),
 );
 }
}
class MeuAppBar extends StatelessWidget {
 const MeuAppBar({required this.title, Key? key}) : super(key: 
key);
 final Widget title;
 @override
 Widget build(BuildContext context) {
 return Container(
 height: 56.0, 
 padding: const EdgeInsets.symmetric(horizontal: 8.0),
 decoration: BoxDecoration(color: Colors.blue[500]),
 child: Row(
 children: [
 const IconButton(
 icon: Icon(Icons.menu),
 tooltip: 'Um Menu',
 onPressed: null, // null desabilita o botão
 ),
 // Expanded expande seu child para ocupar o espaço livre.
 Expanded(
 child: title,
 ),
 const IconButton(
 icon: Icon(Icons.search),
Estrutura básica de aplicativos Flutter14
 tooltip: 'Pesquisar',
 onPressed: null,
 ),
 ],
 ),
 );
 }
}
Uma vez executado, o aplicativo deve retornar o resultado mostrado na 
figura a seguir.
Muitos widgets da linguagem Material Design precisam estar dentro de 
um MaterialApp para serem exibidos de modo correto. Portanto, dentro 
da função main(), runApp inicia criando um MaterialApp, que define sua 
propriedade title para App 02 e define como página principal (home) um wid-
get SafeArea, responsável por garantir que seu widget-filho não ultrapasse 
limites “seguros” de visualização dentro da área visível do dispositivo-alvo. 
O widget SafeArea define como filho um widget MeuScaffold. 
Estrutura básica de aplicativos Flutter 15
O widget MeuScaffold organiza seus filhos (children) em uma coluna 
vertical. Na parte superior da coluna, ele coloca uma instância do widget 
MeuAppBar, passando a barra de aplicativo de um widget de texto para utilizar 
como seu título. Passar widgets como argumentos para outros widgets nos 
permite criar widgets genéricos que podem ser reutilizados de várias maneiras. 
Por fim, o widget MeuScaffold usa um widget Expanded para preencher o 
espaço restante com seu body, que consiste em uma mensagem centralizada 
contida em um widget Text: 'Outro app em Flutter!'.
O widget MeuAppBar cria um Container com a altura de 56 pixels in-
dependentes do dispositivo com preenchimento interno de 8 pixels, tanto 
à esquerda quanto à direita. Dentro do Container, o widget MeuAppBar 
usa um widget de leiaute Row para organizar seus filhos (children). Seus 
widgets-filhos são um IconButton, que exibe: um ícone de menu (Icons.
menu); um Expanded contendo o título (title) a seguir, exibido na barra; 
e outro IconButton, que exibe um ícone de pesquisa (Icons.search). 
Os widgets IconButton que tem uma dica definida (tooltip) estão desa-
bilitados (propriedade onPressed igual a null).
Portanto, você constrói aplicativos Flutter basicamente “encaixando” 
widgets uns nos outros, como se fossem peças de Lego. Isso nos fornece 
uma forma poderosa e flexível para criar aplicações com interfaces gráficas 
mais bonitas e eficientes para os usuários. Para se profundar mais nesse 
assunto, leia a documentação disponível no site oficial do Flutter e confira 
mais exemplos de utilização de widgets. 
Referências 
DART.DEV. A tour of the Dart language. [S.l.: s.n.], 2021. Disponível em: https://dart.dev/
guides/language/language-tour. Acessado em: 28 ago. 2021. 
FLUTTER documentation. [Mountain View: Google, 2021]. Disponível em: https://flutter.
dev/docs. Acesso em: 28 ago. 2021.
GOOGLE. Dart Overview. Versão 2.13. [Mountain View]: Google, 2021a. Disponível em: 
https://dart.dev/overview. Acesso em: 28 ago. 2021.
GOOGLE. Flutter. Versão 2.2. [Mountain View]: Google, 2021b. Disponível em: https://
flutter.dev/. Acesso em: 28 ago. 2021.
GOOGLE. Flutter: install. Versão 2.2. [Mountain View]: Google, 2021c. Disponível em: 
https://flutter.dev/docs/get-started/install. Acesso em: 28 ago. 2021.
Estrutura básica de aplicativos Flutter16
GOOGLE. Flutter: Windows install. Versão 2.2. [Mountain View]: Google, 2021d. Disponível 
em: https://flutter.dev/docs/get-started/install/Windows. Acesso em: 28 ago. 2021.
GUIA do usuário: Android Studio. [Mountain View: Google], 2021. Disponível em: https://
developer.android.com/studio/intro. Acesso em: 28 ago. 2021.
WRITE your first Flutter app, part 1. [Mountain View: Google, 2021]. Disponível em: 
https://flutter.dev/docs/get-started/codelab. Acesso em: 28 ago. 2021.
Leituras recomendadas
ZAMMETTI, F. Flutter na prática. [S.l.]: Novatec, 2020.
MARINHO, L. H. Iniciando com Flutter Framework. [S.l.]: Casa do Código, 2020.
Os links para sites da web fornecidos neste capítulo foram todos 
testados, e seu funcionamento foi comprovado no momento da 
publicação do material. No entanto, a rede é extremamente dinâmica; suas 
páginas estão constantemente mudando de local e conteúdo. Assim, os edito-
res declaram não ter qualquer responsabilidade sobre qualidade, precisão ou 
integralidade das informações referidas em tais links.
Estrutura básica de aplicativos Flutter 17
Dica do Professor
Um desafio na criação de aplicações móveis é executá-las para testes, uma vez que o ambiente de 
desenvolvimento é quase sempre diferente daquele de execução. É possível conectar o dispositivo 
móvel (smartphone) à máquina de desenvolvimento por meio de um cabo USB e executar o 
aplicativo diretamente no dispositivo físico, procedimento recomendado para se ter a experiência 
real de execução. No entanto, isso requer a configuração do dispositivo, que não é padrão 
(especialmente se for Android). Então, é possível executar osaplicativos Flutter em um dispositivo 
virtual emulado.
Nesta Dica do Professor, você vai aprender como configurar um dispositivo virtual Android no 
Android Studio para executar aplicações Flutter.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/2ec03b4e04388204953d29f2aaf9c563
Exercícios
1) Dentro das corporações, a tecnologia mobile proporciona vários benefícios, como acesso 
mais rápido e prático a informações, facilitando a análise de dados, o gerenciamento e a 
tomada de decisão.
Assim, é importante que os desenvolvedores de software acompanhem de perto todas as 
tendências, não apenas para manterem seu produto atrativo, mas também para não 
desperdiçarem oportunidades no mercado mobile. Nesse contexto, o Flutter é um dos 
frameworks móveis mais usados atualmente.
Qual das alternativas a seguir apresenta uma vantagem de se criarem aplicativos móveis 
utilizando Flutter?
A) Os aplicativos Flutter são mais seguros do que os criados em outras plataformas.
B) Os aplicativos Flutter são mais rápidos do que os criados em outras plataformas.
C) Os aplicativos Flutter têm melhor interface gráfica do que os criados em outras plataformas.
D) Os aplicativos Flutter reduzem os custos de publicação e manutenção nas stores.
E) Os aplicativos Flutter são produzidos a partir de uma única base de código, permitindo 
construir aplicativos nativos em múltiplas plataformas.
Um desafio para o desenvolvedor Flutter é definir corretamente a hierarquia de widgets de leiaute 
e interface a fim de gerar o aspecto visual desejado.
Como desenvolvedor Flutter, você deseja criar um aplicativo que exiba três mensagens de texto, 
uma em cima da outra. O código parcial desse aplicativo é dado a seguir:
2) 
Qual alternativa completa corretamente a lacuna?
O código Flutter para esse aplicativo é:
A) Confira a justificativa:
 
 
Clique aqui
B) Confira a justificativa:
 
Clique aqui
C) Confira a justificativa:
 
Clique aqui
Confira a justificativa:D) 
https://statics-marketplace.plataforma.grupoa.education/sagah/a9f8201a-6f46-4646-8991-a2156e8c379d/091f1ec7-f521-4e6a-9dd7-a4f26cd96b9c.pdf
https://statics-marketplace.plataforma.grupoa.education/sagah/961da8bf-f494-4b6e-ad8e-95eeed9cf551/64674b1c-61de-4bb7-9869-af878c6a3376.pdf
https://statics-marketplace.plataforma.grupoa.education/sagah/c480017f-73e3-4b22-b30d-b90ceb031867/f337a3ba-c91a-49b8-bdc8-c881bea86568.pdf
 
Clique aqui
E) Confira a justificativa:
 
 
Clique aqui
3) Os widgets Flutter são os componentes básicos com os quais se constroem aplicativos. A 
interface de usuário de um aplicativo Flutter normalmente é composta de widgets de leiaute, 
que estruturam e organizam a exibição dos demais widgets, e widgets de interface, que são 
os componentes visuais que compõem a tela do aplicativo.
Qual das alternativas a seguir contém um nome de widget de interface?
A) Center.
B) Column. 
C) Scaffold. 
D) Row. 
E) Text. 
A primeira coisa que se deve analisar ao entender como uma interface será construída em Flutter é 
imaginar qual combinação de widgets pode ser feita para chegar no resultado esperado. Podem-se 
desenvolver alguns customizados, além de utilizar os disponíveis do catálogo do Flutter e, até 
mesmo, pacotes criados pela comunidade.
Como deveria estar estruturado o código Flutter para exibir quatro widgets de texto (Text), de 
forma que fiquem dispostos em duas linhas e duas colunas, como mostrado a seguir?
4) 
https://statics-marketplace.plataforma.grupoa.education/sagah/d3b7920f-6850-4a75-8bee-9f6dece56f16/ff780e6a-8418-4afe-89d8-59e31a44c725.pdf
https://statics-marketplace.plataforma.grupoa.education/sagah/b678275c-ef47-4a67-9d13-46066dfd654a/39caa235-aec9-480d-b09c-19d0a9eab47c.pdf
 
Assinale a resposta correta.
A) Confira a justificativa:
 
 
Clique aqui
B) Confira a justificativa:
 
 
Clique aqui
Confira a justificativa:
 
 
C) 
https://statics-marketplace.plataforma.grupoa.education/sagah/46a7ad87-5d07-427e-a11c-4ee0bd18897c/0b26f22c-0cda-48f5-b540-3fb032e943b0.pdf
https://statics-marketplace.plataforma.grupoa.education/sagah/40e61514-3252-4602-9232-867811c1b9f5/66ff7cee-c9f8-4643-83a8-57e034f6fed7.pdf
Clique aqui
D) Confira a justificativa:
 
 
Clique aqui
E) Confira a justificativa:
 
 
Clique aqui
Um aplicativo Flutter utiliza um estilo de definição de leiaute declarativo: o desenvolvedor 
descreve como os widgets de leiaute e de interface são dispostos em uma hierarquia em forma de 
árvore.
O Flutter tem uma rica coleção de widgets de interface, responsáveis por exibir componentes na 
tela do aplicativo para que o usuário possar ler/interagir. Entre esses widgets, pode-se citar o 
Image.network(URL), responsável por exibir uma imagem baixada do URL especificado da internet. 
Normalmente, esse widget é inserido dentro de um widget contêiner, para permitir o 
dimensionamento da imagem no aplicativo. O widget contêiner tem os parâmetros width e height, 
que definem, respectivamente, a largura e a altura de sua área na tela. Outro widget muito comum 
é o TextButton, que pode ser usado para criar um botão a partir de um Text definido como seu 
widget-filho.
Os parâmetros dos widgets podem ser usados para formatar sua exibição. O widget Text tem um 
parâmetro opcional chamado style, que usa um objeto TextStyle para formatar o texto escrito no 
widget Text, alterando o tamanho de sua fonte (parâmetro fontSize), por exemplo.
Considere o código Flutter a seguir:
5) 
https://statics-marketplace.plataforma.grupoa.education/sagah/f98a0b4c-b41a-400b-b8a1-9d2da3ee8234/2ecab80b-78ff-4f87-b1b4-22d30571d6a8.pdf
https://statics-marketplace.plataforma.grupoa.education/sagah/00955866-9597-4972-8c5d-62ac7e0555aa/5536f09b-3fd6-4cce-ad15-7af91351f5f5.pdf
https://statics-marketplace.plataforma.grupoa.education/sagah/23e5a70a-9e78-43a9-9b23-a3081d349af7/44a44687-e045-4ac9-9d59-45cdf5a2605d.pdf
 
Quando for executado em um dispositivo móvel, qual será a aparência do aplicativo?
A) 
B) 
C) 
D) 
E) 
Na prática
Uma das grandes vantagens de se utilizar o Flutter para criar aplicações móveis é a possibilidade de 
desenvolver aplicativos nativos tanto para Android como para iOS.
Por ser programado exclusivamente para o sistema operacional do dispositivo móvel, um aplicativo 
nativo é mais rápido e confiável. Além disso, apresenta melhor experiência para o usuário, ao 
utilizar todos os recursos oferecidos pelos smartphones, como câmera, GPS e notificações push. Eles 
também podem ter um maior tempo de utilização, por poderem funcionar sem conexão com a 
internet.
Você vai conhecer, Na Prática, o caso de Eduardo, um desenvolvedor de aplicativos móveis que 
precisa criar para as plataformas Android e iOS e encontrou no Flutter a solução para seu 
problema.
Aponte a câmera para o 
código e acesse o link do 
conteúdo ou clique no 
código para acessar.
https://statics-marketplace.plataforma.grupoa.education/sagah/7b9df622-d29c-4a00-af52-f5861eda9680/0bdbb30f-b109-4ce6-badb-d2c65a80c1a2.jpg
Saiba mais
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:
Como testar um app do Flutter
Neste codelab, você vai aprender a criar testes usando o framework de testes de widgets. Também 
vai saber como criar um teste de integração para testar a IU e o desempenho do app usando o 
pacote integration_test, além de testar classes de dados (provedores) com a ajuda de testes de 
unidade.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
A primeira aula de Flutter que todo mundo deveria ter
Esta videoaula, feita por Filipe Deschamps, traz um interessante conteúdo para iniciantes de Flutter 
e Dart.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Introdução ao Dart para desenvolvedores Java
Dart é a linguagem de programação do Flutter, o kitde ferramentas de IU da Google para criar apps 
nativos incríveis para computador, dispositivos móveis e web com uma única base do código. Este 
codelab apresenta o Dart com foco em recursos que normalmente são desconhecidos por 
desenvolvedores de linguagens tradicionais, como Java.
https://codelabs.developers.google.com/codelabs/flutter-app-testing?hl=pt-br#0
https://www.youtube.com/embed/J4BVaXkwmM8
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://codelabs.developers.google.com/codelabs/from-java-to-dart?hl=pt-br#0