Flutter: O que são widgets e qual sua importância \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 17 Horas 51 Min 46 Seg Tempo restante da oferta: 17 51 46 [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) Flutter: O que são widgets e qual sua importância [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) # Flutter: O que são widgets e qual sua importância Veja neste artigo o que são e qual a importância dos widgets para a criação de interfaces no Flutter. [ Fagner Pinheiro ](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/14165959/Widgets-Flutter.png) [O Flutter](https://www.treinaweb.com.br/blog/o-que-e-flutter/) é um framework desenvolvido pela Google para criação de aplicações móveis multiplataforma (Android e iOS) utilizando uma única base de código e muito clamado por sua facilidade em desenvolver aplicações com uma interface intuitiva e agradável. Para a criação destas interfaces, o Flutter utiliza um conceito de Widgets, como veremos neste artigo. ## O que são widgets? Como dito anteriormente, toda interface de um aplicativo desenvolvido com o Flutter é criada com base em um conjunto de Widgets. Basicamente, um widget é um componente visual para definir a interface de um aplicativo. Pense em uma tela do aplicativo como um LEGO, onde cada widget é uma pequena peça e, ao final, este conjunto de peças representará uma interface completa: ![Construção de interfaces no Flutter](https://dkrn4sk0rn31v.cloudfront.net/2020/05/15090303/lego-interfaces-flutter.png) Para esse comportamento, o Flutter divide seus widgets em duas categorias: - Layout: Widgets responsáveis por determinar a organização e posicionamentos de outros widgets. Estes widgets servem para delimitar áreas em nossas telas que serão preenchidos por outros widgets; - Interface: Widgets responsáveis por criar componentes visuais que serão exibidos para os usuários. Estes widgets servem para determinar os componentes que comporão a interface do aplicativo. [ ![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) ### Widgets de Layout Como dito anteriormente, os widgets de layout servem para determinar a estrutura da interface dos aplicativos e a organização de outros widgets que comporão a tela do app. Estes widgets são de grande importância no Flutter, já que uma estrutura bem definida de uma página é fundamental para a construção de sua interface. O Flutter possui diversos widgets de layout, alguns dos principais são: - [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html): Um widget responsável por criar um layout “padrão” para o app, contendo uma `appBar` e o conteúdo da tela. - [Stack](https://flutter.dev/docs/development/ui/layout#stack): Widget responsável por “empilhar” widgets na tela do topo ao final da interface. - [Container](https://flutter.dev/docs/development/ui/layout#container): Widget responsável por comportar novos widgets de layout. O Container é muito utilizado para comportar widgets em sua estrutura separando-os com bordas. ### Widgets de Interface Diferente dos widgets de layout, os widgets de interface servem para criar componentes visuais que serão incorporados ao widgets de layout e, assim, organizados na tela. São componentes visuais, como botões, labels, icones, textos e qualquer outro componente que compõe a interface de um aplicativo. O Flutter [possui centenas de widgets de interfaces](https://flutter.dev/docs/development/ui/widgets) documentados e prontos para serem utilizados em nossos aplicativos. Destes, podemos dar destaque para 2 conjuntos de widgets amplamente utilizados, o [Material](https://flutter.dev/docs/development/ui/widgets/material) e o [Cupertino](https://flutter.dev/docs/development/ui/widgets/cupertino). Basicamente, o Material é responsável por estilizar os widgets de interface com base nos padrões do [Material Design](https://www.treinaweb.com.br/blog/o-que-e-material-design/) da Google. Já o Cupertino é responsável por estilizar os widgets de interface com base nos padrões de design do iOS. Vale lembrar que o time do Flutter é responsável pela construção e manutenção desses estilos, sendo assim, caso haja alguma mudança nos componentes destas plataformas, é questão de tempo até serem implementados no Flutter. ### Layout + Interface Como vimos, os widgets de layout e interface são utilizados em conjunto. Basicamente, a construção de interfaces são compostos por widgets de interface inseridos em widgets de layout, como pode ser visto na imagem abaixo: ![construcao-interface-widgets-flutter](https://dkrn4sk0rn31v.cloudfront.net/2020/05/14145719/construcao-widgets-interface-app.png)A imagem acima demonstra a combinação dos widgets de layout e interface para a construção de interfaces. É possível notar que os widgets de interface (botões, textos, icones) são “encaixados” nos widgets de layout (Column, Row). - [ #flutter ](https://www.treinaweb.com.br/blog/tag/flutter) - [ #widgets ](https://www.treinaweb.com.br/blog/tag/widgets) Autor ![Fagner Pinheiro](//secure.gravatar.com/avatar/e622f7c7d686a0b11f8d977ce9725b67?d=mm) ## Fagner Pinheiro Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) ## 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/2020/05/STATELESS-VS-STATEFUL-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ Flutter: Widgets Stateful e Stateless ](https://www.treinaweb.com.br/blog/flutter-widgets-stateful-e-stateless) Veja neste artigo o que são os widgets stateful e stateless e quando utilizá-los. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/04115610/capa-flutter-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 8 anos atrás ## [ Por que estudar Flutter? ](https://www.treinaweb.com.br/blog/por-que-estudar-flutter) Veja neste artigo as vantagens de se estudar o Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/LAYOUT-FLUTTER-RESPONSIVO-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 5 anos atrás ## [ Como construir um layout Flutter responsivo ](https://www.treinaweb.com.br/blog/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 . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/PUB-DEV-400x280.jpg) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 4 anos atrás ## [ Gerenciador de pacotes Dart e Flutter ](https://www.treinaweb.com.br/blog/gerenciador-de-pacotes-dart-e-flutter) Saiba o que é o gerenciador de pacotes Dart e Flutter, como utilizar um pacote, biblioteca instalada por ele e sobre o pubspec.yaml. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/27202313/FLUTTER-O-QUE-É-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é Flutter? ](https://www.treinaweb.com.br/blog/o-que-e-flutter) Veja neste artigo o que é Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/o_que_e_firebase-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ O que é Firebase? ](https://www.treinaweb.com.br/blog/o-que-e-firebase) Veja neste artigo o que é Firebase. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/ARTIGO-DART-400x280.jpg) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 4 anos atrás ## [ Guia da linguagem dart ](https://www.treinaweb.com.br/blog/guia-da-linguagem-dart) Nesse guia da linguagem Dart você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação Dart. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/22111207/FLUTTER-ANDROID-STUDIO-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ Configurando ambiente de desenvolvimento Flutter ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-flutter) Veja neste artigo como configurar o ambiente de desenvolvimento Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/17120810/Fuchsia-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ O que é o Fuchsia? ](https://www.treinaweb.com.br/blog/o-que-e-o-fuchsia) Veja neste artigo o que é o Fuchsia, novo sistema operacional da Google. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/como-instalar-o-dart-e-executar-seu-primeiro-exemplo-400x280.png) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 6 anos atrás ## [ Conhecendo variáveis e constantes no Dart ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-dart) Neste artigo conheceremos as variáveis e constantes no Dart. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/como-instalar-o-dart-e-executar-seu-primeiro-exemplo-400x280.png) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 6 anos atrás ## [ Como instalar o Dart e executar seu primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-o-dart-e-executar-seu-primeiro-exemplo) Neste artigo veremos como instalar o Dart nos sistemas Windows, Linux e MacOS e executar nosso primeiro programa com a linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/criando-um-readme-para-seu-perfil-do-github-400x280.png) [ Git ](https://www.treinaweb.com.br/blog/categoria/git) 6 anos atrás ## [ Criando um README para seu perfil do GitHub ](https://www.treinaweb.com.br/blog/criando-um-readme-para-seu-perfil-do-github) Veja neste artigo como criar uma descrição para seu perfil do GitHub. 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 **17h 51min 46s** - 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