Como construir um layout Flutter responsivo \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 07 Horas 32 Min 35 Seg Tempo restante da oferta: 07 32 35 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Como construir um layout Flutter responsivo [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) # Como construir um layout Flutter responsivo Neste artigo veremos algumas das abordagens e widgets que são usados no desenvolvimento de aplicativos responsivos com Flutter . [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 5 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/LAYOUT-FLUTTER-RESPONSIVO.png) Neste artigo, vamos aprender algumas das abordagens e widgets que são usados na construção de layouts responsivo no Flutter. Quando falamos em responsividade, significa dizer que o conteúdo ou o layout deve ser flexível para caber em diferentes tamanhos de tela as quais a aplicação será exibida. Um dos principais objetivos do [Flutter](https://www.treinaweb.com.br/blog/o-que-e-flutter "O que é Flutter") é criar uma estrutura que permita desenvolver aplicativos a partir de uma única base de código. Isso significa que seu aplicativo pode aparecer em telas de diferentes dimensões. Não há uma regra para projetar um layout responsivo em Flutter, o mesmo disponibiliza diversas maneiras para se alcançar tal objetivo e cada uma é mais indicada para um determinado contexto, o importante é conhecer quais são essas maneiras e como as mesmas funcionam. ## A diferença entre um aplicativo adaptativo e um responsivo Em primeiro lugar, adaptável e responsivo podem ser vistos como dimensões separadas de um aplicativo. Você pode ter um aplicativo adaptativo que não seja responsivo, ou vice-versa. E, claro, um aplicativo pode ser ambos, ou nenhum dos dois. Normalmente, um aplicativo responsivo deve ter seu layout sintonizado para o tamanho da tela disponível. Por exemplo, se o usuário redimensionar a janela ou mudar a orientação do dispositivo. Contudo, adaptar um aplicativo para ser executado em diferentes tipos de dispositivos, como celular e desktop, requer lidar com a entrada de mouse e do teclado, bem como entrada de toque. Por exemplo, uma tela que ao scrollar arrastando o dedo no touch screen também deve responder ao scrollar do mouse. [ ![Flutter - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/flutter.svg) Curso Flutter - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/flutter-fundamentos) ## Como construir um layout Flutter responsivo Antes de mais nada, o Flutter permite criar aplicativos que se auto ajustam para diferentes tamanhos e orientações da tela do dispositivo. Para que isso seja possível, temos diversos widgets que vão nos ajudar no desenvolvimento de aplicativos responsivos. Alguns widgets e classes úteis para criar uma interface do usuário responsiva são: - [AspecRatio](https://api.flutter.dev/flutter/widgets/AspectRatio-class.html "AspectRatio") - [CustomSingleChildLayout](https://api.flutter.dev/flutter/widgets/CustomSingleChildLayout-class.html "CustomSingleChildLayout") - [CustomMultiChildLayout](https://api.flutter.dev/flutter/widgets/CustomMultiChildLayout-class.html "CustomMultiChildLayout") - [FittedBox](https://api.flutter.dev/flutter/widgets/FittedBox-class.html "FittedBox") - [FractionallySizedBox](https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html "FractionallySizedBox") - [MediaQuery](https://api.flutter.dev/flutter/widgets/MediaQuery-class.html "MediaQuery") - [MediaQueryData](https://api.flutter.dev/flutter/widgets/MediaQueryData-class.html "MediaQueryData") Agora, vamos ver alguns exemplos de como utilizar esses widgets. ### OrientationBuilder O widget `OrientationBuilder` permite que você modifique seu layout para responder de acordo com a orientação do dispositivo. ```dart OrientationBuilder( builder: (context, orientation) { return GridView.count( crossAxisCount: orientation == Orientation.portrait ? 2 : 4, mainAxisSpacing: 10, crossAxisSpacing: 10, children: List.generate( 50, (index) => Container( color: Colors.grey, child: Text( "$index", style: const TextStyle(fontSize: 32), ), ), ), ); }, ); ``` Assim como mostrado neste exemplo o `OrientationBuilder` tem um builder que passa o `context` e o `orientation`, os quais podemos utilizar para saber em qual tipo de orientação o dispositivo se encontra. Sendo assim dependendo da orientação em que o dispositivo estiver nosso layout irá se organizar em duas ou quatro colunas. Confira mais detalhes na [Documentação do OrientationBuilder](https://api.flutter.dev/flutter/widgets/OrientationBuilder-class.html "Documentação OrientationBuilder") [ ![Dart - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/dart.svg) Curso Dart - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/dart-fundamentos) ### LayoutBuilder De acordo com a documentação do Flutter o `LayoutBuilder` é um widget que consegue passar o tamanho onde ele se encontra na arvore de widgets. ```dart @override Widget build(BuildContext context) { const percent = 3; return Scaffold( body: LayoutBuilder( builder: (context, constrains) { return Column( children: [ Container( width: constrains.maxWidth, height: constrains.maxHeight / percent, color: Colors.red, ), Container( width: constrains.maxWidth, height: constrains.maxHeight / percent, color: Colors.blue, ), Container( width: constrains.maxWidth, height: constrains.maxHeight / percent, color: Colors.green, ), ], ); }, ), ); } ``` O `LayoutBuilder` passa um builder, que é uma função, passando o `context` e as `constrains`. As `constrains` são exatamente onde conseguimos pegar o tamanho e fazer um cálculo simples para que todos os conteúdos filhos possam caber corretamente na tela. Ou seja, como resultado teremos containers que vão se adaptar independentemente do tamanho da tela. Confira mais detalhes na [Documentação do LayoutBuilder](https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html "Documentação LayoutBuilder") ### Flexible e Expanded Também temos os widgets `Flexible` e `Expanded` para nos ajudar na construção de layouts Flutter responsivos. O widgets `Expanded` e `Flexible` funcionam de maneira semelhante, ambos vão preencher todo o conteúdo disponível da tela. Porém, o `Flexible` permite que você respeite o tamanho do widget filho enquanto o `Expanded` não. ```dart Column( children: [ Flexible( child: Container( color: Colors.blue, ), ), Flexible( flex: 3, child: Container( color: Colors.green, ), ), Flexible( child: Container( height: 100, color: Colors.red, ), ), ], ); ``` Desse modo mostrado no exemplo todos os filhos do `Flexible` vão tentar ocupar o maximo de espaços possível. [ ![Flutter - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/flutter.svg) Curso Flutter - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/flutter-fundamentos) ## Componentes Usando uma abordagem de componentização, podemos extrair sua lógica do layout em componentes separados para que, ao projetar layouts em uma tela grande, você não precisa definir a lógica separadamente. Sendo assim podemos apenas reutilizar a lógica que foi definido para cada fragmento. Vamos utilizar como exemplo o código desenvolvido no artigo [Criando um BottomNavigationBar com Flutter](https://www.treinaweb.com.br/blog/criando-um-bottomnavigationbar-com-flutter "criando um BottomNavigationBar"), porém o fragmentando em um componente para melhor reaproveitamento. ```dart class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( bottomNavigationBar: CustomAppBar(), ), ); } } class CustomAppBar extends StatelessWidget { const CustomAppBar({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return OrientationBuilder( builder: (context, orientation) { final isPortrait = orientation == Orientation.portrait; return BottomNavigationBar( items: [ BottomNavigationBarItem( icon: const Icon(Icons.person), label: "Minha conta", activeIcon: isPortrait ? null : const Text('Configurações da conta'), ), BottomNavigationBarItem( icon: const Icon(Icons.shopping_basket), label: "Meus pedidos", activeIcon: isPortrait ? null : const Text('Carrinho de Compras e seus pedidos'), ), BottomNavigationBarItem( icon: const Icon(Icons.favorite), label: "Favoritos", activeIcon: isPortrait ? null : const Text('Itens Favoritos do carrinho'), ), ], ); }, ); } } ``` ## Gráficos vetoriais Ao contrário de serem criados usando bitmaps de pixel, gráficos vetoriais são imagens definidas em arquivos XML como caminhos e cores. Sendo assim eles podem escalar para qualquer tamanho sem perder a qualidade da imagem. Caso queira aprender mais sobre imagens vetoriais leia o artigo [O que são imagens vetoriais](https://www.treinaweb.com.br/blog/o-que-sao-imagens-vetoriais/ "O que são imagens vetoriais"). ## Conclusão Criar um aplicativo totalmente responsivo em Flutter é um desafio, porém, como vimos neste artigo há uma série de widgets que podemos usar para nós auxiliar nesta tarefa. Além disso, existem plugins que também possuem o intuito de facilitar a vida que quem desenvolve aplicativos responsivos com Flutter, alguns deles são: - [Device Preview](https://pub.dev/packages/device_preview "Device Preview") - [Responsive Builder](https://pub.dev/packages/responsive_builder "Responsive Builder") - [Responsive Framework](https://pub.dev/packages/responsive_framework "Responsive Framework") Por fim, caso queira aprender mais sobre Flutter e sua infinidade de recursos saiba que aqui na [Treinaweb](https://www.treinaweb.com.br/ "TreinaWeb") temos o curso [Flutter - Fundamentos](https://www.treinaweb.com.br/curso/flutter-fundamentos "Flutter fundamentos") que possui **01h54 de vídeo** e um total de **11 exercícios**. Conheça também nossos outros cursos de [Flutter](https://www.treinaweb.com.br/cursos?q=dart "cursos dart e flutter"). Veja quais são os tópicos abordados durante o curso de Flutter - Fundamentos: - Como configurar seu ambiente de desenvolvimento; - O que são e como funcionam os widgets; - O que são os widgets stateful e stateless; - Como funciona a hierarquia de interfaces do Flutter; - Como trabalhar com estados em nosso app; - Como validar formulários com o Flutter. - [ #flutter responsivo ](https://www.treinaweb.com.br/blog/tag/flutter-responsivo) - [ #flutter layout responsivo ](https://www.treinaweb.com.br/blog/tag/flutter-layout-responsivo) - [ #Como construir um layout Flutter responsivo ](https://www.treinaweb.com.br/blog/tag/como-construir-um-layout-flutter-responsivo) - [ #widgets responsivo flutter ](https://www.treinaweb.com.br/blog/tag/widgets-responsivo-flutter) - [ #widgets responsivo ](https://www.treinaweb.com.br/blog/tag/widgets-responsivo) Autor ![Ariel Sardinha](//secure.gravatar.com/avatar/d0b89ee09026eb2b9e26f286c04eba03?d=mm) ## Ariel Sardinha Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. [arielsardinha](https://www.linkedin.com/in/ariel-sardinha/) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/listas-tabelas-HTML-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Apresentando dados com listas e tabelas ](https://www.treinaweb.com.br/blog/apresentando-dados-com-listas-e-tabelas) Neste artigo, veremos como apresentarmos dados com listas e tabelas HTML e qual a sua importância no mundo dos desenvolvedores front-end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143726/TW-ENTREVISTAS-TALITA-PAGANI-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 07: Talita Pagani ](https://www.treinaweb.com.br/blog/tw-entrevista-07-talita-pagani) Fizemos uma série de entrevistas chamada "TW Entrevista". A entrevistada de hoje é a Talita Pagani, desenvolvedora, empreendedora e membro da W3C's Web Accessibility Working Group do Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/page-builders-para-wordpress-o-que-sao-e-como-podem-nos-ajudar-400x280.png) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 6 anos atrás ## [ Page Builders para WordPress: o que são e como podem nos ajudar? ](https://www.treinaweb.com.br/blog/page-builders-para-wordpress-o-que-sao-e-como-podem-nos-ajudar) Saiba o que são os Page Builders para WordPress e como eles podem te ajudar a criar sites e blogs incríveis! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/27171404/diego-eis-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 11: Diego Eis ](https://www.treinaweb.com.br/blog/tw-entrevista-11-diego-eis) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Diego Eis, fundador do Tableless, um dos maiores sites sobre desenvolvimento web do Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143340/TW-ENTREVISTAS-MAUJOR-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 01: Maujor ](https://www.treinaweb.com.br/blog/tw-entrevista-01-maujor) Fizemos uma série de entrevistas com desenvolvedores chamada “TW Entrevista”. O primeiro entrevistado é o Maujor, o dinossauro das CSS. Confira! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/enviando-e-mails-no-asp-net-core-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Enviando e-mails no ASP.NET Core ](https://www.treinaweb.com.br/blog/enviando-e-mails-no-asp-net-core) O .NET possui um módulo nativo para o envio de e-mails. Entretanto, veja como facilitar este processo utilizando a biblioteca Coravel. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/16094538/liquid-fluid-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Trabalhando com a template engine Liquid no ASP.NET Core ](https://www.treinaweb.com.br/blog/trabalhando-com-a-template-engine-liquid-no-asp-net-core) Em alguns projetos pode ser necessário substituir o Razor por outra engine template. Neste caso, aprenda como fazer esta substituição pelo Liquid. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/caminhos-certifica--o-400x280.jpg) [ Certificações ](https://www.treinaweb.com.br/blog/categoria/certificacoes) 10 anos atrás ## [ Os caminhos das certificações Microsoft (parte 1) ](https://www.treinaweb.com.br/blog/os-caminhos-das-certificacoes-microsoft-parte-1) Veja como funcionam as trilhas e sub-trilhas de certificação da Microsoft para desenvolvedores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/Como_instalar_e_utilizar_o_Bootstrap_via_npm-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Como instalar e utilizar o Bootstrap via npm ](https://www.treinaweb.com.br/blog/como-instalar-e-utilizar-o-bootstrap-via-npm) Instalar Bootstrap via npm e alterar suas variáveis, é mais simples do que imagina. Hoje iremos juntos fazer o download do Bootstrap 5. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/15120239/capa-facade--400x280.png) [ Infraestrutura e Sistemas Operacionais ](https://www.treinaweb.com.br/blog/categoria/infraestrutura-e-sistemas-operacionais) 7 anos atrás ## [ O que é uma aplicação multitenant? ](https://www.treinaweb.com.br/blog/o-que-e-uma-aplicacao-multitenant) Quando falamos de Software as a Service (SaaS) e cloud computing, é inevitável que o termo "multitenant" surja. Mas, afinal, o que é multitenancy? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/03/evoluir-carreira-TI-min-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 3 anos atrás ## [ Como evoluir em sua carreira da forma correta? ](https://www.treinaweb.com.br/blog/como-evoluir-em-sua-carreira-da-forma-correta) Confira nesse artigo alguns pilares para te ajudar a construir uma carreira de sucesso na área de tecnologia. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/11/como-se-tornar-um-desenvolvedor-melhor-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 6 anos atrás ## [ Como se tornar um desenvolvedor melhor ](https://www.treinaweb.com.br/blog/como-se-tornar-um-desenvolvedor-melhor) Quando trabalhamos com desenvolvimento, é de suma importância estarmos atentos a como estamos como profissionais. Confira neste artigo algumas dicas de como se tornar um desenvolvedor melhor. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **07h 32min 35s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58