Compondo leiaute de interface de usuário no Flutter

Prévia do material em texto

Compondo leiaute de interface de 
usuário no Flutter
Apresentação
Atualmente, o Flutter tem cada vez mais se destacado como um dos principais frameworks para 
desenvolvimento de aplicativos para dispositivos móveis. Elaborado pela Google como ferramenta 
para criação de aplicações multiplataforma (Android e iOS), tem sua arquitetura baseada na 
utilização de widgets.
Repetida quase como um mantra, a frase "em Flutter tudo é widget" é a filosofia desse framework. 
No design de interfaces não é diferente, todos os elementos, como botões, textos, listas, campos de 
entrada, entre outros, são widgets, bem como o são os elementos invisíveis utilizados na construção 
dessas interfaces.
Em um primeiro momento, é estranho pensar a centralização de um texto como sendo um widget, 
mas é verdade. Os widgets do leiaute são responsáveis pela organização, pelos alinhamentos, entre 
outras funções. Mesmo não sendo visíveis, são igualmente importantes para a construção de uma 
boa experiência na utilização do aplicativo.
Nesta Unidade de Aprendizagem, você vai conhecer os principais conceitos que cercam os widgets 
de leiaute e quais são os principais utilizados para composição de leiautes. Também vai conhecer o 
que são leiautes responsivos e algumas técnicas usadas para sua implementação.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Descrever o papel dos widgets de leiaute.•
Explicar a composição de leiautes.•
Aplicar técnicas de leiautes responsivos.•
Desafio
No cotidiano das equipes de desenvolvimento, é muito comum segmentar as atividades. Enquanto 
algumas equipes produzem o design da interface e elaboram as estratégias de interação e estilo, 
outras se responsabilizam por sua implementação e manutenção. Ambas as tarefas são igualmente 
importantes para atingir o objetivo, a satisfação do usuário.
Dependendo da organização de cada equipe, os projetos chegam como imagens, que devem ser 
decompostas de forma estrutural, compreendidas e, então, implementadas, utilizando as 
ferramentas, os frameworks e outros recursos para a criação das aplicações.
Considerando o leiaute do post da notícia e os widgets necessários para sua implementação, você 
consegue identificar cada widget utilizado na construção do leiaute e de que modo seria a sua 
representação como uma árvore de widgets?
Infográfico
Trabalhar com elementos visuais é muito interessante, pois sua construção traz um efeito imediato 
para o desenvolvedor. Por outro lado, essa construção pode causar várias horas de trabalho para 
ajustar corretamente cada elemento em seu lugar.
Em Flutter, os widgets de leiaute Row e Column são bastante utilizados. Por isso, saber suas 
configurações de alinhamento pode ser de grande ajuda. Muitas vezes um pequeno ajuste ou a 
escolha da propriedade correta são capazes de poupar tempo de desenvolvimento e linhas de 
código.
No Infográfico, conheça um pouco mais sobre os métodos de alinhamento dos mainAxisAlignment e 
crossAxisAlignment e seu impacto em tela.
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/1cf49aa9-07fc-4dff-84a7-97a37f7c685b/a3fba3d3-5a36-4364-bcf8-81738602ab8f.jpg
Conteúdo do Livro
Construir um leiaute para um aplicativo pode parecer algo trivial, mas seu impacto para o usuário 
pode ser bastante significativo. O trabalho inicia no projeto da interface, em que se começa a 
dispor os elementos visíveis na tela. Mas tão importantes quanto os itens visíveis, são os elementos 
que não são visíveis, mas permitem que todos os demais sejam organizados corretamente.
Esses itens invisíveis, mas indispensáveis, são os widgets de leiaute. Tão relevantes quanto os 
widgets de interface do usuário, os widgets de leiaute são responsáveis por posicionar, alinhar e 
fornecer um método para definição de interfaces para diferentes dispositivos.
No capítulo Compondo leiaute de interface de usuário no Flutter, base teórica desta Unidade de 
Aprendizagem, conheça os widgets de leiaute, seu papel, estrutura hierárquica e função na 
composição de leiautes, bem como o conceito de responsividade e como pode impactar na 
utilização do aplicativo em diferentes dispositivos.
Boa leitura.
FUNDAMENTOS DE 
DESENVOLVIMENTO 
MOBILE
OBJETIVOS DE APRENDIZAGEM
 > Descrever o papel dos widgets de leiaute.
 > Explicar a composição de leiautes.
 > Aplicar técnicas de leiaute responsivos.
Introdução
Flutter é um framework fundamentado na utilização de widgets para desen-
volvimento das funcionalidades e implementação das regras de negócio do 
aplicativo e para construção da interface do usuário, principal canal de inte-
ratividade entre o usuário e a aplicação. Apesar de os widgets de interface 
visíveis proporcionarem esse canal de interação, são os widgets de leiaute que 
mantêm tudo nos seus devidos lugares. Inicialmente, pode parecer estranho 
pensar em colunas e linhas como widgets. Outros, como centralizar e ajustar 
distanciamentos, são igualmente importantes, pois auxiliam a organizar, res-
tringir ou alinhar os widgets visíveis.
Compondo leiaute 
de interface de 
usuário no Flutter
Marcelo da Silva dos Santos
Neste capítulo, você vai conhecer os conceitos de widgets invisíveis utilizados 
na interface, os widgets de leiaute. Com a apresentação dos seus conceitos 
básicos, organização hierárquica e como se interrelacionam, você vai estudar 
qual é a influência deles no design de interfaces normais ou responsivas, 
aquelas voltadas para utilização em quaisquer dispositivos sem perda da 
experiência do usuário.
Widgets para construção de leiautes
Nos últimos tempos, o Flutter tem ganhado bastante espaço no mercado de 
desenvolvimento de aplicativos para dispositivos móveis. Ele é um framework 
multiplataforma criado pelo Google para desenvolvimento de aplicativos 
Android e iOS. Sua arquitetura é baseada em widgets, componentes com as 
mais diversas finalidades, utilizados também para construção dos aplicativos. 
Podemos dizer que todo aplicativo Flutter é um widget composto por centenas 
de outros widgets.
Quando falamos que em Flutter tudo é widget, não é exagero. Todos os 
elementos que compõem o leiaute da interface são widgets. Não só os compo-
nentes que você imagina, como botões, caixas de texto ou outros componentes 
visíveis, mas também de alinhamentos, espaçamentos, entre outros. Pode ser 
estranho pensar na centralização de um elemento na interface como sendo um 
widget, mas é verdade. Nesse modelo de arquitetura, os leiautes são criados 
com a combinação de widgets para compor widgets mais complexos. Um 
exemplo mais simples é entender o aplicativo criado como um jogo de peças 
de encaixar, em que cada componente representa uma parte do produto. 
Observe um exemplo dessa construção na Figura 1.
Figura 1. Alusão da utilização de widgets como peças de encaixar.
Fonte: Melo (2021, documento on-line).
Compondo leiaute de interface de usuário no Flutter2
Note, nesse exemplo, que todas as peças coloridas (widgets visíveis) 
precisam de uma base. Nesse caso, é a peça branca (widgets não visíveis) 
que serve para fixar e organizar as demais. A interface do aplicativo tem a 
mesma lógica: uma combinação de elementos visíveis, mas também uma 
grande quantidade de elementos não visíveis, como as linhas, colunas e 
outros tipos de contêineres que os delimitam e alinham. O Flutter classifica 
esses widgets nos dois grupos principais a seguir.
1. Widgets de interface: componentes visíveis na tela, interface do usuário 
(UI, do inglês user interface), como textos, botões, campos de entrada 
de dados, entre outros.
2. Widgets de leiaute: componentes responsáveis pela organização e 
posicionamento dos demais widgets.
Nosso objetivo neste capítulo é conhecer melhor os widgets de leiaute, 
mas eventualmente utilizaremos alguns widgets de interface por motivos 
óbvios: necessitamos de algo para organizar.
Voltando à ideia apresentadana Figura 1, para construirmos nossa interface 
de usuário, precisamos encaixar uma peça na outra e vamos ter uma ordem 
de inclusão dos elementos, daqueles que estão mais próximos da base para 
os que estão mais distantes. Agora, imagine essa estrutura de outra forma, 
como se fosse uma árvore de cabeça para baixo. A raiz da árvore será a 
base, e cada peça conectada diretamente a ela se torna um galho, que vai 
se expandindo e ramificando conforme as peças vão sendo conectadas. No 
Flutter, chamamos essa estrutura de árvore de widgets. 
Para compreender melhor esse conceito, vamos a um exemplo muito 
conhecido e apresentado na documentação oficial do Flutter (FLUTTER..., 
[2021]). Observe na Figura 2 uma barra de funcionalidades simples, composta 
por três funções para chamada, mensagem e compartilhamento.
Figura 2. Barra de funções simples, contendo três funcionalidades da interface.
Fonte: Flutter… (2021, documento on-line).
Compondo leiaute de interface de usuário no Flutter 3
Para entender como representar essa barra como uma árvore de widgets, 
vamos decompô-la em seus elementos constituintes. Observe na Figura 3 
como os widgets de leiaute encapsulam os widgets visíveis.
Figura 3. Decomposição da barra de funções em seus widgets constituintes.
Fonte: Adaptada de Flutter… (2021).
Widget pai envolvendo todos os widgets internos
Widget de coluna agrupando os elementos visíveis
Widget de centralização envolvendo individualmente cada item visível
Nesse exemplo, temos um elemento-base que agrupa (container) as três 
funções, sendo este o elemento-raiz (também chamado de elemento-pai). Cada 
função é colocada em uma coluna diferente, composta por dois elementos 
(um ícone e um texto) agrupados em cada uma dessas colunas. Podemos 
representar essa estrutura no formato de uma árvore, como mostra a Figura 4.
Note que a partir do elemento-pai (a raiz da árvore), cada ramo é formado 
por um filho (ou filhos), expandindo até chegar aos elementos que estão mais 
próximos ao topo da pilha (as peças encaixadas por último). É importante 
destacar que o Flutter considera, no momento de definir as propriedades 
que serão transmitidas aos filhos, a quantidade de elementos conectados a 
um determinado widget-pai, classificando nas duas propriedades a seguir.
1. Child: tem um único widget, como um contêiner para adicionar mar-
gens em um texto.
2. Children: tem uma lista de widgets, como uma coluna com vários 
elementos.
Compondo leiaute de interface de usuário no Flutter4
Figura 4. Árvore de widgets formada pela estrutura da barra de funções exemplo.
Fonte: Adaptada de Flutter... (2021).
Container
Container Container Container
Column
Icon Icon
Text Text Text
Icon
Column Column
Row
Na construção hierárquica de uma interface, um widget pode receber 
um Child ou Childrens, que, por sua vez, também podem receber outros 
Child ou Childrens. Além de organizar, essa estrutura também auxilia em 
outras situações como quando é necessário redesenhar a interface porque 
algo mudou (retirar um elemento de uma listagem, por exemplo). Nesse caso, 
o Flutter pode redesenhar somente a parte da interface que sofreu alteração, 
mantendo o restante inalterado.
Agora que você conhece um pouco do relacionamento dos widgets com 
a construção de um leiaute, vamos apresentar alguns dos principais widgets 
de leiaute e como utilizá-los.
Compondo leiaute de interface de usuário no Flutter 5
Principais componentes de leiaute
Como você acompanhou até agora, os widgets de leiaute organizam todos os 
elementos visíveis para o usuário, criando a sua experiência com o aplica-
tivo e influenciando a sua forma de interação. Por isso, é muito importante 
conhecer os widgets de leiaute e como utilizá-los na criação de interfaces. 
O Flutter fornece muitos widgets especialmente projetados, como Container, 
Center, Align, Row, Column, entre outros, todos com o propósito de definir 
a interface para interação do usuário.
Relembrando, eles podem ser agrupados em widgets que admitem apenas 
um filho (child) ou vários filhos (children). Essa informação é importante 
na composição das interfaces, pois a utilizamos em sua construção. Como 
exemplo, vamos criar uma composição simples utilizando como ponto inicial 
um widget visível simples, um texto criado pelo widget Text:
Text('Hello World')
Para centralizarmos esse texto, utilizaremos o widget Center e, para que a 
propriedade seja aplicada, aqui entra a definição do parentesco (ou hierarquia) 
entre os dois elementos. Nesse caso, o elemento Text será filho de Center:
const Center(
 child: Text('Hello World'),
),
Já os widgets que comportam mais de um filho serão representados pela 
propriedade children. Para finalizar, devemos inserir a composição em 
uma interface. Definida essa sintaxe inicial, vamos aos widgets de leiaute.
Center
Como iniciamos apresentando o widget Center (GOOGLE, 2021b), vamos 
continuar apresentando suas propriedades. Ele tem a função de centralizar 
os seus filhos. Como parâmetros associados a esse elemento, podemos citar 
os seguintes.
Compondo leiaute de interface de usuário no Flutter6
 � heightFactor: calcula a altura do widget Center em relação à altura 
do filho multiplicando seu fator pela altura do filho. Por exemplo, se 
o fator for 2.0, a altura de Center será o dobro da altura dos filhos.
 � widthFactor: calcula a largura do widget Center em relação à largura 
do filho multiplicando seu fator pela largura do filho. Por exemplo, se 
o fator for 2.0, a largura de Center será o dobro da largura dos filhos.
Observe o exemplo (FLUTTER..., [2021]):
child: Center(
heightFactor: 2,
child: Text(
 'Hello World',
 textDirection: TextDirection.ltr,
 style: TextStyle(
 fontSize: 32,
 color: Colors.black87,
 ),
),
),
Podemos notar que o espaço ocupado pelo Center terá o dobro do ta-
manho do Text. O valor-padrão para os parâmetros heightFactor e wi-
dthFactor é nulo e, nesse caso, o widget Center assumirá o tamanho de 
seu widget-filho.
Align
Align é o widget responsável pelo alinhamento de seus widgets-filhos (GOO-
GLE, 2021a) e, opcionalmente, também pode ser redimensionado com base nos 
parâmetros heightFactor e widthFactor, mas a propriedade que vamos 
destacar aqui é o alignment. É por meio dele que posicionamos o nosso 
texto em uma das nove possibilidades disponíveis. São elas: (1) topLeft, (2) 
topCenter, (3) topRight, (4) centerLeft, (5) center, (6) centerRight, (7) 
bottomLeft, (8) bottomCenter e (9) bottomRight. Observe na Figura 5 o 
mapeamento de cada posição.
Compondo leiaute de interface de usuário no Flutter 7
Figura 5. Mapeamento das posições de alinhamento.
Fonte: Adaptada de Google (2021a).
Vamos a um exemplo de aplicação:
child: Align(
 alignment: Alignment.center,
 child: Text(
 'Hello World',
 textDirection: TextDirection.ltr,
 style: TextStyle(
 fontSize: 32,
 color: Colors.black87,
 ),
 ),
),
Outras formas de alinhamento podem ser definidas pelos demais widgets, 
mas geralmente são aplicáveis ao seu contexto, como veremos em breve nas 
Rows e Columns.
Padding
O widget Padding (GOOGLE, 2021f) é basicamente usado para adicionar espaço 
extra ao redor de um widget usando a classe abstrata EdgeInsetsGeometry. 
Suas propriedades principais estão listadas a seguir.
 � EdgeInsets.all(120): adiciona espaço vazio de 120 pixels em todas 
as direções do elemento-filho.
 � EdgeInsets.fromLTRB(50, 120, 10, 10): adiciona espaço vazio de 
50 pixels, 120 pixels, 10 pixels e 10 pixels, respectivamente nas direções 
esquerda, superior, direita e inferior.
Compondo leiaute de interface de usuário no Flutter8
child: Container(
 padding: const EdgeInsets.fromLTRB(50, 120, 10, 10),
 color: Colors.white,
 width: 200.0,
 height: 200.0,
 child: Text(
 'Hello World',
 style: TextStyle(color: Colors.black87),
 ),
),
Você já deve ter percebido que os widgets de leiaute incluem um envelope 
ao redor do filho, correto? Logo, existe um espaço vazioentre o widget-pai e 
o widget-filho, que será afetado pelo Padding.
Container
Chegamos ao Container (GOOGLE, 2021d), um widget mais completo, que 
basicamente combina as propriedades já vistas (tamanho, cor, borda, padding, 
margin, entre outras), que comporta um ou mais widgets-filhos. Basicamente, 
ele pode se comportar como aquela base para encaixe de peças, que co-
mentamos na seção anterior. A partir dele, podemos montar os conjuntos de 
elementos visíveis aplicando alinhamentos, posições, redimensionamentos, 
entre outras propriedades.
Container(
 padding: EdgeInsets.all(10.0),
 alignment: Alignment.topCenter,
 width: 200,
 height: 100,
 decoration: BoxDecoration(
 color: Colors.green,
 border: Border.all(),
 ),
 child: Text(
 'Hello World',
 style: TextStyle(fontSize: 30)
 ),
);
Compondo leiaute de interface de usuário no Flutter 9
Note que esse exemplo apresenta um Container para um widget Text, 
mas dessa vez aplicando ao mesmo tempo diversas propriedades, entre elas 
o padding e o alignment. Somente com essa estrutura já podemos montar 
diferentes interfaces, mas ainda faltam duas propriedades bastante conhe-
cidas, os widgets Columns e Rows.
Row e Column
Row (GOOGLE, 2021g) e Column (GOOGLE, 2021c) são os dois widgets muito 
utilizados na organização de conjuntos de widgets. Eles permitem o alinha-
mento dos filhos horizontalmente e verticalmente, respectivamente. Suas 
propriedades mais comuns são as que seguem.
 � mainAxisAlignment: alinha os filhos no eixo principal.
 � crossAxisAlignment: alinha os filhos no eixo transversal.
Note que, para um widget Row, o eixo principal é horizontal, e o eixo 
transversal é vertical. Para o widget Column, o comportamento é o inverso: 
o eixo principal é vertical, e o eixo transversal é horizontal.
Primeiramente, vamos a um exemplo de uso do row:
child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: [
 Image.asset('images/lands _ 01.jpg'),
 Image.asset('images/lands _ 02.jpg'),
 Image.asset('images/lands _ 03.jpg'),
 ],
),
O resultado está apresentado na Figura 6.
Compondo leiaute de interface de usuário no Flutter10
Figura 6. Exemplo de alinhamento em linha.
Fonte: Dias (2020, documento on-line).
Já para o widget Column, o resultado é o alinhamento dos mesmos ele-
mentos, mas verticalmente:
child: Column(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: [
 Image.asset('images/lands _ 01.jpg'),
 Image.asset('images/lands _ 02.jpg'),
 Image.asset('images/lands _ 03.jpg'),
 ],
),
Compondo leiaute de interface de usuário no Flutter 11
Observe o resultado apresentado na Figura 7.
Figura 7. Exemplo de alinhamento em coluna.
Fonte: Dias (2020, documento on-line).
Agora que você conhece os principais widgets de leiaute e seu compor-
tamento, vamos analisar como podemos criar uma interface responsiva, ou 
seja, que se acomode adequadamente ao dispositivo que estiver acessando-o.
Responsividade em leiaute Flutter
Um design responsivo nada mais é do que a forma que o leiaute responde e 
se ajusta a diferentes tamanhos de telas, sem distorcer o conteúdo ou tornar 
alguma parte inacessível. Com a variedade de dispositivos e considerando 
que uma aplicação Flutter também pode ser disponibilizada para uma versão 
web, podemos ter a necessidade de que ela seja também aberta em desktop 
ou um tablet, sem distorcer os widgets visíveis ou simplesmente esticar a 
Compondo leiaute de interface de usuário no Flutter12
visualização deles. A Figura 8 apresenta um exemplo de responsividade em 
leiautes para diferentes dispositivos.
Figura 8. Design responsivo.
Fonte: Novo... (2014, documento on-line).
Em design para web, já é implementado a bastante tempo o MediaQuery 
(GOOGLE, 2021e) como metodologia para resolução dessa necessidade. As 
técnicas de MediaQuery são nativas do Flutter, proporcionando uma forma 
de obter informações sobre o tamanho do dispositivo atual, bem como as 
preferências do usuário. Assim, o desenvolvedor pode utilizar essas informa-
ções para projetar seu leiaute de acordo. Um exemplo simples de seu uso é 
verificar se o usuário alterou a orientação do dispositivo (virou o celular da 
posição vertical para a horizontal, por exemplo). Nesse caso, seria reconhe-
cida uma mudança de estado da interface, e o Flutter pode reconstruir ela 
posicionando os elementos de uma forma mais condizente.
Compondo leiaute de interface de usuário no Flutter 13
A seguir estão algumas situações em que é relevante reconhecer infor-
mações do dispositivo.
 � Identificar a orientação de um dispositivo móvel; se ele está na posição 
horizontal ou vertical.
 � Ajustar os paddings conforme os tamanhos de tela.
• Identificar preferências do usuário, como desativar animações ou 
inversão de cores para recursos de acessibilidade.
Também quanto à acessibilidade, reconhece se o usuário tem configuração 
para tamanho de fonte aumentada.
Flutter utiliza o conceito de mudança de estado para gerenciar sua 
interface de usuário, sendo que o estado é qualquer informação que 
esteja na memória durante o tempo de execução do aplicativo, como assets, 
conteúdo de variáveis, fontes, texturas, dentre outros (FLUTTER..., [2021]). Ele 
tem duas categorias de widgets para gerenciar os estados de uma aplicação e 
seus impactos e para gerenciar as alterações de interface ligadas a mudanças de 
estado: StatelessWidget (ou Widget sem estado), estruturas mais simples que se 
mantêm imutáveis durante o seu ciclo de vida, e os StatefulWidget (Widget com 
estados), muito utilizados na implementação de interfaces, pois são capazes 
de reagir e reconstruir partes da árvore de widgets, sempre que o estado do 
widget muda.
Em Flutter, o MediaQuery também é um widget capaz de reconhecer 
características do dispositivo. Sua implementação é realizada com a instru-
ção MediaQuery.of diretamente no método de construção. O método of 
acessa a árvore, obtendo informações sobre o dispositivo onde o aplicativo 
está sendo renderizado.
A partir de então, basta associar outros métodos capazes de capturar 
diretamente a característica que o desenvolvedor necessita. Por exemplo, 
uma chamada ao método MediaQuery.of(context).size terá como retorno 
um objeto Size contendo os valores de largura e altura do dispositivo. Com 
base nessa informação, você pode definir o tamanho para um widget. Por 
exemplo, em uma determinada situação, você precisa que um bloco de texto 
ocupe somente 80% da largura da tela do dispositivo do usuário, mas como 
saber qual é esse tamanho em pixels? Nesse caso usaremos:
Compondo leiaute de interface de usuário no Flutter14
final largura = MediaQuery.of(context).size.width * 0.8;
Note que não importa qual é o tamanho da tela ou a posição que ela está; 
a variável largura sempre conterá o valor para o momento atual. Nesse exem-
plo, recuperamos somente a largura do dispositivo, mas também é possível 
recuperar todo um conjunto de propriedades. Acessando o método Media-
Query.of(contexto), é obtido como retorno um objeto MediaQueryData 
(GOOGLE, 2021e):
MediaQueryData media = MediaQuery.of(context);
Com esse objeto, podemos utilizar outros métodos do widget MediaQuery 
para aplicar em nosso design, como os que seguem.
 � Orientation orientation: identifica a orientação atual (horizontal 
ou vertical).
 � Size size: identifica as dimensões de um elemento em pixels.
 � double devicePixelRatio: identifica a razão entre o número de 
pixels do dispositivo para cada pixel lógico.
 � bool accessibleNavigation: identifica preferências do usuário 
quanto à acessibilidade.
 � bool boldText: identifica preferências do usuário quanto à utilização 
de fonte em negrito.
 � bool invertColors: identifica preferências do usuário quanto à 
inversão de cores.
 � bool disableAnimations: identifica preferências do usuário quanto 
a desabilitar animações.
 � bool alwaysUse24HourFormat: identifica se o horário do dispositivo 
utiliza padrão 24 horas.
 �Brightness platformBrightness: identifica se o usuário tem pre-
ferências de brilho para o display.
Observe no exemplo a seguir alguns exemplos de acesso a essas proprie-
dades via objeto MediaQueryData.
Compondo leiaute de interface de usuário no Flutter 15
Widget build(BuildContext context) {
 MediaQueryData media = MediaQuery.of(context);
 return Scaffold(
 appBar: AppBar(
 title: Text('Media Query - Exemplo'),
 centerTitle: true,
 ),
 body: Padding(
 padding: const EdgeInsets.all(10.0),
 child: Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: [
 Text('Tamanho: ${media.size}', 
 style: TextStyle(fontSize: 20.0)),
 Text('Orientação: ${media.orientation}',
 style: TextStyle(fontSize: 20.0)),
 Text('Hora(24h): ${media.alwaysUse24HourFormat}',
 style: TextStyle(fontSize: 20.0)),
 Text('Brilho: ${media.platformBrightness}',
 style: TextStyle(fontSize: 20.0)),
 Text('Acessibilidade: ${media.accessibleNavigation}',
 style: TextStyle(fontSize: 20.0)),
 ],
 ),
Um exemplo dos valores obtidos para esses métodos pode ser observado 
na Figura 9.
Compondo leiaute de interface de usuário no Flutter16
Figura 9. Teste com os métodos fornecidos pelo objeto MediaQueryData.
Fonte: Adaptada de Macoratti (2020).
A partir dessas propriedades, podemos acessar os valores para cada 
característica dos dispositivos, fornecendo recursos para que possamos 
implementar as situações em que os elementos devem ser alterados.
Como você percebeu, criar uma interface não é uma atividade complexa, 
desde que conheça as propriedades adequadas de como utilizá-las em seu 
projeto. O ideal é que você crie seu leiaute antes de implementá-lo, seja com 
um esboço em papel, seja com um protótipo desenhado em alguma ferramenta 
gráfica. Assim, você terá um norteador dos widgets (tanto visíveis quanto 
invisíveis) de que vai necessitar. Além disso, prever a responsividade do seu 
aplicativo é uma boa prática nos tempos atuais, pois oferecemos ao usuário 
mais uma forma para que ele tenha uma boa experiência ao utilizar o aplicativo.
Referências 
DIAS, R. Flutter: criando layouts com Center, Column e Row. DevMedia, 2020. Disponível 
em: https://www.devmedia.com.br/flutter-criando-layouts-com-center-column-e-
-row/40743. Acesso em: 30 ago. 2021.
FLUTTER documentation. [Mountain View: Google, 2021]. Disponível em: https://flutter.
dev/docs. Acesso em: 28 ago. 2021.
GOOGLE. Flutter: Align class. Versão 2.2.3. [Mountain View: Google], 2021a. Disponível 
em: https://api.flutter.dev/flutter/widgets/Align-class.html. Acesso em: 30 ago. 2021.
Compondo leiaute de interface de usuário no Flutter 17
GOOGLE. Flutter: Center class. Versão 2.2.3. [Mountain View: Google], 2021b. Disponível 
em: https://api.flutter.dev/flutter/widgets/Center-class.html. Acesso em: 30 ago. 2021.
GOOGLE. Flutter: Column class. Versão 2.2.3. [Mountain View: Google], 2021c. Disponível 
em: https://api.flutter.dev/flutter/widgets/Column-class.html. Acesso em: 30 ago. 2021.
GOOGLE. Flutter: Container class. Versão 2.2.3. [Mountain View: Google], 2021d. Dis-
ponível em: https://api.flutter.dev/flutter/widgets/Container-class.html. Acesso em: 
04 ago. 2021.
GOOGLE. Flutter: MediaQuery class. Versão 2.2.3. [Mountain View: Google], 2021e. 
Disponível em: https://api.flutter.dev/flutter/widgets/MediaQuery-class.html. Acesso 
em: 30 ago. 2021.
GOOGLE. Flutter: Padding class. Versão 2.2.3. [Mountain View: Google], 2021f. Disponível 
em: https://api.flutter.dev/flutter/widgets/Padding-class.html. Acesso em: 30 ago. 2021.
GOOGLE. Flutter: Row class. Versão 2.2.3. [Mountain View: Google], 2021g. Disponível 
em: https://api.flutter.dev/flutter/widgets/Row-class.html. Acesso em: 30 ago. 2021.
MACORATTI, J. C. Flutter: Usando o widget MediaQuery. Macoratti.net, 2020. Disponível 
em: http://www.macoratti.net/20/03/flut_mediaq1.htm. Acesso em: 02 ago. 2021.
MELO, R. de. Flutter para iniciantes. [S.l.: s.n.], 2021. Disponível em: https://www.flut-
terparainiciantes.com.br/. Acesso em: 30 ago. 2021.
NOVO site do Globo: uma nova forma de produzir e publicar notícias. O Globo, 2014. 
Disponível em: https://oglobo.globo.com/politica/novo-site-do-globo-uma-nova-
-forma-de-produzir-publicar-noticias-12678667. Acesso em: 2 set. 2021.
Leituras recomendadas
DART.DEV. Dart documentation. [S.l.: s.n., 2021]. Disponível em: https://dart.dev/docs. 
Acesso em: 30 ago. 2021
GOOGLE. Flutter: MediaQueryData class. Versão 2.2.3. [Mountain View: Google], 2021. 
Disponível em: https://api.flutter.dev/flutter/widgets/MediaQueryData-class.html. 
Acesso em: 30 ago. 2021.
MARINHO, L. H. Iniciando com Flutter Framework. [S.l.]: Casa do Código, 2020.
ZAMMETTI, F. Flutter na prática: melhore seu desenvolvimento mobile com o SDK open 
source mais recente do Google. São Paulo: Novatec, 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.
Compondo leiaute de interface de usuário no Flutter18
Dica do Professor
Atualmente, cada vez mais as empresas têm buscado ampliar seus canais de comunicação com seu 
público-alvo, e os aplicativos têm sido uma ferramenta importante nessa aproximação. Mas, para 
que o objetivo seja alcançado, é necessário que o aplicativo proporcione uma boa experiência ao 
usuário.
Para atingir esse objetivo, diversos temas estão ganhando espaço entre as equipes de 
desenvolvimento, como as interfaces de usuário, a usabilidade e a acessibilidade. Essas áreas de 
estudo verificam a relação da interface com o usuário e como ela deve se adaptar ao contexto dele, 
às diferentes formas e aos dispositivos que o usuário utiliza no seu cotidiano. Em Flutter, um widget 
nativo do framework se destaca na entrega de informações importantes nessa tarefa, o 
MediaQuery.
Na Dica do Professor, acompanhe alguns conceitos de experiência de usuário e como o 
MediaQuery pode suprir algumas dessas necessidades de informações.
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/73d6bc5f660b7f7d921ac6e1645c29cc
Exercícios
1) A criação de uma interface em Flutter é composta por widgets visíveis e invisíveis, estes 
últimos representados pelos widgets de leiaute. A hierarquia entre esses widgets pode ser 
representada por uma árvore que se expande à medida que novos elementos são 
incorporados à interface.
Em relação à árvore de widgets, assinale a alternativa correta:
A) Os widgets do tipo Row devem ser utilizados sempre abaixo de um widget Column na 
hierarquia do leiaute.
B) O widget Container é utilizado para criar a raiz da hierarquia e não deve ser utilizado mais de 
uma vez.
C) Declara-se uma composição de widgets como childrens somente ao utilizar widgets do tipo 
Column ou Row.
D) Como forma de organização, podemos incluir tanto um Row em um Column, quanto um 
Column em um Row.
E) Um Container, por ser genérico, pode ser utilizado em substituição a um Column, com as 
mesmas propriedades.
Diversas metodologias e técnicas para composição de leiautes são disponíveis pelo Flutter 
em forma de widgets. Análise os conceitos sobre os widgets de leiaute a seguir e relacione a 
primeira e a segunda colunas:
I. Center 
II. Container 
III. Padding 
IV. Align
( ) Pode ser usado para estruturar o leiaute geral da tela de um aplicativo ou partes menores. 
( ) Fornece nove opções para posicionamento de um widget visível. 
( ) Tem a capacidade de alterar os espaços entre um widget e os elementos ao seu redor.2) 
( ) Afeta o posicionamento horizontal de um widget visível.
Assinale a alternativa que apresenta a ordem correta:
A) I, III, IV, II.
B) II, IV, III, I.
C) III, IV, I, II.
D) IV, I, III, I.
E) II, III, I, IV.
3) Uma interface para uma aplicação Flutter é composta por um grande conjunto de widgets de 
interface organizados por widgets de leiaute. Entre esses widgets, encontramos os Columns e 
os Rows.
Sobre os widgets Column e Row, avalie as seguintes afirmações 
e a relação proposta entre elas:
I. É muito comum compor leiautes utilizando widgets Column 
em conjunto com widgets Row.
Porque:
II. Ambos são interdependentes um do outro.
Assinale a alternativa correta:
A) As afirmações I e II são proposições verdadeiras, mas a II não justifica a I. 
B) As afirmações I e II são proposições verdadeiras e a II justifica a I. 
C) A afirmação I é uma proposição verdadeira e a II, falsa. 
D) A afirmação I é uma proposição falsa e a II, verdadeira. 
E) As afirmações I e II são proposições falsas. 
Responsividade não é um conceito novo, sendo implementado há bastante tempo no 
desenvolvimento de aplicações para web. Analise as afirmativas a seguir e classifique-as em 
verdadeiras (V) ou falsas (F):
4) 
( ) Um design pode ser considerado responsivo quando apresentar exatamente a mesma 
estrutura de leiaute em qualquer dispositivo, tanto na vertical quanto na horizontal. 
( ) Um leiaute responsivo em Flutter deve se preocupar principalmente com dispositivos 
móveis, visto que o framework é voltado para aplicativos e não para sistemas desktop. 
( ) Um leiaute responsivo deve considerar tanto o tamanho do dispositivo quanto a sua 
posição, reorganizando os widgets na tela conforme essas características.
Assinale a alternativa que preenche as lacunas de forma correta:
A) F, F, V.
B) F, V, F.
C) V, F, V.
D) V, F, F.
E) F, V, V.
5) Na criação de leiautes responsivos em Flutter, diversas técnicas podem ser utilizadas, 
baseadas no conhecimento de informações sobre o dispositivo que o usuário está utilizando 
para acesso.
Em relação ao conceito relacionado ao uso de MediaQuery, assinale a alternativa correta:
A) MediaQuery é um widget nativo do Flutter, capaz de capturar dados úteis na definição de 
leiaute, como cores preferidas, marca e modelo do dispositivo.
B) O MediaQuery tem diversas funções, entre elas reconhecer o tipo de dispositivo, 
substituindo suas funcionalidades em decorrência do tamanho da tela.
C) Por meio da propriedade of do widget MediaQuery pode-se acessar dados relevantes do 
dispositivo do usuário, como tamanho de tela e aplicativos preferidos.
D) Acessar informações do dispositivo pode auxiliar a criar melhores interfaces e experiências 
para o usuário, mas não auxilia no projeto de acessibilidade.
E) A largura do dispositivo pode ser obtida via propriedade width do objeto Size que por sua vez, 
é acessado pela propriedade size do objeto MediaQueryData.
Na prática
Os dispositivos móveis já fazem parte do cotidiano das pessoas, tanto nas horas de lazer quanto 
para auxílio no trabalho ou estudos. Esse aumento na demanda e suas características técnicas 
foram fatores que auxiliaram a impulsionar o Flutter, que cada vez ganha destaque no mercado de 
desenvolvimento de aplicativos para dispositivos móveis.
A rápida adoção a determinado aplicativo deve-se, em parte, a uma boa experiência do usuário em 
sua utilização, experiência essa que é impulsionada também por uma interface bem construída. 
Nesse sentido, aprender a utilizar corretamente os widgets de leiaute se torna imprescindível.
Na Prática, acompanhe o desenvolvimento da interface de um aplicativo Pomodoro, para auxiliar na 
gestão do tempo.
 
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/620f03e7-04d2-431d-8447-64486dfe4908/8e94ccf2-a037-4d53-b2d2-543f25794dd8.jpg
Saiba mais
Para ampliar o seu conhecimento a respeito desse assunto, veja a seguir as sugestões do professor:
Tutorial Flutter #03 - Layout
Neste vídeo, acompanhe uma introdução a criação de leiautes com o Flutter framework e o uso de 
widgets de interface e o widget de leiaute Center.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Tutorial Flutter #04 - Containers e Padding
Neste vídeo, conheça um pouco mais sobre os widgets Container e Padding, como é a interação 
entre eles e com outros widgets visíveis.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Flutter.Dev
Neste site, conheça a documentação oficial do Flutter, um dos maiores repositórios de informação 
sobre a ferramenta, com exemplos de código e tutoriais sobre os principais widgets, entre outros 
temas.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://www.youtube.com/embed/qTbEIHokhTk
https://www.youtube.com/embed/RQyBJA3RpfM
https://flutter.dev/docs/development/ui/layout
[Flutter] - Responsivo/Adaptativo deixando seu aplicativo igual 
em qualquer dispositivo
Neste vídeo, conheça um pouco sobre o funcionamento da responsividade/adaptatividade em 
aplicativos Flutter, além de configurações utilizando porcentagem, metade da tela e LayoutBuilder.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Layout Explorer
Neste vídeo, você vai conhecer a ferramenta Layout Explorer (Dart DevTools) e como ela pode ser 
útil na visualização dos widgets do Flex e seus filhos. Serão apresentadas também três formas de 
usar o Layout Explorer para depurar problemas de leiaute durante a criação de um aplicativo.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://www.youtube.com/embed/WSRn9G66xwg
https://www.youtube.com/embed/Jakrc3Tn_y4