Flutter: Widgets Stateful e Stateless \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 59 Min 16 Seg Tempo restante da oferta: 14 59 16 [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: Widgets Stateful e Stateless [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) # Flutter: Widgets Stateful e Stateless Veja neste artigo o que são os widgets stateful e stateless e quando utilizá-los. [ Fagner Pinheiro ](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/STATELESS-VS-STATEFUL.png) Vimos aqui no blog a [importância dos widgets](https://www.treinaweb.com.br/blog/flutter-o-que-sao-widgets-e-qual-sua-importancia/) para a criação de aplicativos com [o Flutter](https://www.treinaweb.com.br/blog/o-que-e-flutter/), além de suas duas categorias (widgets de interface e widgets de layout). Essa categoria de widgets fornece meios para a construção de interfaces, porém, para que o app consiga “conversar” com o usuário, ele precisa ter seu estado alterado. Por isso, há dois tipos de widgets no Flutter, os [widgets stateful](https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html "widgets stateful") e [stateless](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html "stateless") . Neste artigo veremos cada um deles e qual a sua finalidade. ## O que são estados? Como vimos anteriormente, para que um app consiga “conversar” com o usuário, ele precisa ter seu estado alterado… Mas o que é este “estado”? Basicamente, um estado é uma informação que é alterada em tempo de execução. Imagine que você está no app do Youtube e clica sobre o botão “like” de um vídeo. Neste momento, este botão altera a cor e incrementa em uma unidade o contador de likes, certo? Esta alteração das informações em tempo de execução é chamado de estado: ![Botão de like sendo alterado a partir do clique](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/estado_youtube.gif)Em um app, esta alteração de estado ocorre sempre que uma informação tenha que ser alterada, seja por uma interação do usuário ou uma nova informação vinda de um servidor. Para este tipo de tela, o Flutter utiliza widgets do tipo `Stateful`. Porém, nem toda tela deverá ter sua informação alterada em tempo de execução. Imagine uma tela para exibir um texto de boas vindas para o usuário. Esta tela apenas exibirá uma mensagem, não tendo seu estado alterado. Para este tipo de tela, o Flutter utiliza widgets do tipo `Stateless`. [ ![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 Stateful Como dito anteriormente, os widgets `stateful` são responsáveis por alterar o estado de um componente durante a execução de um aplicativo sem a necessidade do redirecionamento para outra tela. Para isso, os widgets `stateful` possuem a seguinte estrutura: ```java class MyApp extends StatefulWidget { @override State createState() { return _MyAppState(); } } class _MyAppState extends State { @override Widget build(BuildContext context) { return Container(color: const Color(0xFFFFE306)); } } ``` A classe `MyApp` irá retornar uma nova instância da classe `MyAppState` sempre que um estado for alterado na aplicação. Este comportamento permite que um aplicativo em Flutter possa atualizar suas informações em tempo de execução sem a necessidade de um reload. Para esta atualização de estado, o Flutter possui um método especial chamado `setState()`, como veremos abaixo. ### Método setState() Sempre que precisamos alterar um determinado valor em um aplicativo Flutter, devemos adicionar esta instrução no método `setState()`. É ele quem vai alterar o estado desta informação e atualizar a página para que o novo valor seja exibido. Basicamente, o método `setState()` irá alterar o estado de uma variável e chamar o método `build()` para que a interface do aplicativo seja renderizada novamente: ```java class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Primeira App"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Você pressionou o botão:', ), Text( '$_counter vezes', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); } } ``` Sempre que o `floatActionButton`for pressionado, o método `_incrementCounter` será invocado. Nele, o método `setState()` irá incrementar o valor da variável `_counter` e executar o método `build()` para que a interface seja renderizada novamente com o novo valor a ser exibido. ![Contador sendo alterado em execução](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/aplicativo_contador.gif) ## Widgets Stateless Há casos em que precisamos criar uma página apenas para exibir uma informação estática, seja uma mensagem de boas vindas, um formulário de cadastro, uma imagem, etc. Nestes casos, não há a necessidade de criar um widget `Stateful`, já que o estado da tela possuirá o mesmo valor em todo o seu ciclo de vida. Nestes casos, o Flutter possibilita a criação de widgets `Stateless` : ```java class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Primeira App"), ), body: Container( child: Text("Olá, mundo!"), ), ); } } ``` Este tipo de widget criará uma página estática apenas com o texto “Olá, mundo!”: ![Aplicativo exibindo o texto “ola mundo”](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/app_stateless.png) ## Widgets Stateful e Stateless Como vimos neste artigo, é muito importante entendermos o funcionamento e o objetivo de cada tipo de widget no Flutter. Sempre que precisarmos de uma página que terá algum tipo de alteração em tempo de execução, precisamos utilizar um widget do tipo `stateful`. Caso precisemos de uma página que não terá seu estado alterado, o correto é utilizar um widget `stateless`. Esta escolha deve ser feita com muito cuidado, já que um widget do tipo `stateful` consome muito mais memória que um widget do tipo `stateless`. - [ #dart ](https://www.treinaweb.com.br/blog/tag/dart) - [ #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/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/2020/08/criando-um-drawer-navigator-com-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando um drawer navigator com Flutter ](https://www.treinaweb.com.br/blog/criando-um-drawer-navigator-com-flutter) Veja neste artigo como criar um drawer navigator com Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/criando-um-bottomnavigationbar-com-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando um BottomNavigationBar com Flutter ](https://www.treinaweb.com.br/blog/criando-um-bottomnavigationbar-com-flutter) Veja neste artigo como criar um BottomNavigationBar com Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/criando-primeiro-projeto-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando primeiro projeto Flutter ](https://www.treinaweb.com.br/blog/criando-primeiro-projeto-flutter) Veja neste artigo como criar o primeiro projeto Flutter. 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/11/como-funciona-o-async-await-e-future-no-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Como funciona o async-await e Future no Flutter ](https://www.treinaweb.com.br/blog/como-funciona-o-async-await-e-future-no-flutter) Veja neste artigo como trabalhar com programação assíncrona no 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/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/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/2020/05/14165959/Widgets-Flutter-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ Flutter: O que são widgets e qual sua importância ](https://www.treinaweb.com.br/blog/flutter-o-que-sao-widgets-e-qual-sua-importancia) Veja neste artigo o que são e qual a importância dos widgets para a criação de interfaces no Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/22111106/FLUTTER-CONFIGURANDO-FONTES-EXTERNAS-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ Configurando fontes em projetos Flutter ](https://www.treinaweb.com.br/blog/configurando-fontes-em-projetos-flutter) Veja neste artigo como configurar fontes em projetos Flutter. 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 **14h 59min 16s** - 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